logo标签列表

隐藏Highcharts中的坐标轴和网格线

chartshighcharts
85

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

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

是否有办法全局禁用坐标轴线/刻度线和网格线以创建“简单”的图表？

2
这里是如何隐藏y轴的方法。 - Dan Dascalescu
7个回答
159

只需添加即可

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}
自从4.1.9版本以后，您可以直接使用axis属性中的visible来定义x轴。
xAxis: {
    visible: false,
}
@dgw 这会使x轴透明，但它仍然占据数据下方的物理空间。有没有办法将其高度设置为0？ - Trevor Burnham
21
有点过度了。HighCharts应该实现一个简单的属性叫做“visible”，可以切换轴线的显示或隐藏状态。我已经发布了这个功能请求并且你可以在这里为其投票。 - Dan Dascalescu
2
minorGridLineWidth是我正在寻找的晦涩属性。谢谢！ - jetcom
1
@TrevorBurnham - 要删除具有刻度标记的物理空间，您需要设置chart.spacing = [0, 0, 0, 0]（或者只需将任何轴，如chart.spacingLeft，设置为零，如果您不想消除所有间距）。这是我在这个问题上缺失的关键。 - Matthew Dean
我仍然可以在3D中看到轴线！当options3d: { enabled: true }时。 - Cristian Scutaru
1
“tickLength: 0” 看起来就足以隐藏我线状图上的刻度标记。 - Hartley Brody
83

对于yAxis，您还需要：

gridLineColor: 'transparent',

1
你是否也需要将 title.text 设置为 null？不管怎样，HighCharts 应该只需要实现一个简单的属性叫做 “visible”，以切换轴是否显示。我已经把它发到了 建议页面，你可以在那里为它投票。 - Dan Dascalescu
将 gridLineColor 设置为 transparent 可能会过早地移除网格线，如果您仍然有其他轴需要移除，请参见此示例。 - Dan Dascalescu
30
如果您使用的是高于v4.9版本的Highcharts，您可以在和设置中使用visible: false。
示例：
$('#container').highcharts({

    chart: {
        type: 'column'
    },

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

    xAxis: {
        visible: false
    },

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

});
6
这是最好的答案。 - micapam
22

你也可以通过以下方式隐藏y轴上的网格线：

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}
5
我成功地关闭了我的设备，只用了
       lineColor: 'transparent',
       tickLength: 0
3
如果您不想触碰配置对象，您可以通过 CSS 隐藏网格：
.chart-container .highcharts-grid {
   display: none;
}
-2

这对我一直很有效：

yAxes: [{
         ticks: {
                 display: false;
                },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接