隐藏轴线和网格线高图表



我试图完全隐藏我的Highcharts图表的轴和网格线。到目前为止,我试图将行的宽度设置为 0,但没有成功。

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

是否可以全局禁用轴线/刻度线和网格线来创建"普通"图?

只需添加

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

到 xAxis 定义。

从版本 4.1.9 开始,您可以简单地使用 axis 属性visible

xAxis: {
    visible: false,
}

对于yAxis,您还需要:

gridLineColor: 'transparent',

如果你的版本比Highcharts的v4.9更大,你可以在xAxisyAxis设置中使用visible: false

例:

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Highcharts axis visibility'
    },
    xAxis: {
        visible: false
    },
    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }
});

您还可以将yAxis上的网格线隐藏为:

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

我设法关闭了我的

       lineColor: 'transparent',
       tickLength: 0

如果你不想触摸配置对象,你只需通过css隐藏网格:

.chart-container .highcharts-grid {
   display: none;
}

这对我来说一直很有效:

yAxes: [{
         ticks: {
                 display: false;
                },

最新更新