隐藏轴和网格线 Highcharts

Posted 2023-02-16

【中文标题】隐藏轴和网格线 Highcharts

【英文标题】：Hide axis and gridlines Highcharts

【发布时间】：2012-06-08 07:50:36

【问题描述】：

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

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

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

【问题讨论】：

这里是how to hide the yAxis

【参考方案1】：

只需添加

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

到 xAxis 定义。

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

xAxis: 
    visible: false,

【讨论】：

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

这有点矫枉过正。 HighCharts 应该实现一个名为“可见”的简单属性，该属性将切换是否显示轴。我已将其发布为feature request and you can vote for it here。

minorGridLineWidth 是我一直在寻找的不起眼的财产。谢谢！

@TrevorBurnham - 要删除有刻度线的物理空间，您需要设置 chart.spacing = [0, 0, 0, 0] （或者只需设置任何轴，如 chart.spacingLeft，零，如果您不想消除所有间距）。这是我在这个问题上缺少的部分。

tickLength: 0 似乎是我在折线图上隐藏刻度线所需的全部内容。

【参考方案2】：

对于yAxis，您还需要：

gridLineColor: 'transparent',

【讨论】：

是否还需要将title.text 设置为null？无论如何，HighCharts 应该只实现一个名为“可见”的简单属性，它可以切换轴是否显示。我已将其发布为feature request and you can vote for it here。

如果您还有其他轴要移除，将gridLineColor 设置为transparent 可能会过早移除网格线。见this example。

【参考方案3】：

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

例子：

$('#container').highcharts(

    chart: 
        type: 'column'
    ,

    title: 
        text: 'Highcharts axis visibility'
    ,

    xAxis: 
        visible: false
    ,

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

);

【讨论】：

这是最好的答案

【参考方案4】：

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

yAxis: 
  gridLineWidth: 0,
  minorGridLineWidth: 0

【参考方案5】：

我设法关闭了我的只是

       lineColor: 'transparent',
       tickLength: 0

【参考方案6】：

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

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

【参考方案7】：

这对我来说一直很有效：

yAxes: [
         ticks: 
                 display: false;
                ,