隐藏坐标轴和网格线

80

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

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

是否可以仅全局禁用轴线/刻度线和网格线以创建“普通”图？

charts highcharts

— 亚历克斯
source

2

下面是如何隐藏Y轴

— 达恩·达斯卡莱斯卡

149

只需添加

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

到xAxis定义。

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

xAxis: {
    visible: false,
}

— dgw
source

@dgw这使x轴透明，但仍占用数据下的物理空间。有没有办法给它0高度？

— Trevor Burnham

19

这有点矫kill过正。HighCharts应该实现一个称为“ visible”的简单属性，该属性将切换是否显示轴。我已将其发布为功能请求，您可以在此处投票。

— Dan Dascalescu 2013年

2

minorGridLineWidth是我一直在寻找的不起眼的物业。谢谢！

— jetcom 2014年

1

@TrevorBurnham-要删除具有刻度线的物理空间，您需要将chart.spacing = [0，0，0，0]设置为零（或者，如果您不想的话，只需将任何轴（例如chart.spacingLeft）设置为零即可消除所有间距）。对于我来说，这是我所缺少的部分。

— 马修·迪恩

1

tickLength: 0我似乎只需要隐藏折线图上的刻度线即可。

— 哈特利布罗迪

74

对于yAxis您，还需要：

gridLineColor: 'transparent',

— 扎克·莫里斯（Zac Morris）
source

1

您还需要将设置title.text为null吗？无论如何，HighCharts应该只实现一个称为“ visible”的简单属性，该属性将切换是否显示轴。我已将其发布为功能请求，您可以在此处投票。

— Dan Dascalescu 2013年

如果仍然需要删除其他轴，将设置设置gridLineColor为transparent可能会过早删除网格线。请参阅此示例。

— Dan Dascalescu 2013年

28

如果您的版本高于Highcharts v4.9，则可以visible: false在xAxis和yAxis设置中使用。

例：

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

— onetwo12
source

6

这是最好的答案

— micapam'4

21

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

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

— Shweta Bhagwat
source

5

我设法只关闭了我的

       lineColor: 'transparent',
       tickLength: 0

— 本
source

2

如果您不想触摸config对象，只需通过css隐藏网格即可：

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

— 伊朗雷耶斯
source

0

这对我一直很有效：

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

— 0365克里斯
source