Highcharts：在图表上添加一个按钮以隐藏或显示多个轴

Question

我有一个包含 3 个 y 轴的图表。我有一个要求，即用户可以选择在图表上显示或隐藏 y 轴，但我需要一些帮助才能使其正常工作。

我在图表上添加了一个按钮，并尝试了两种不同的方法来隐藏轴： (i) 在轴上使用 show 和 hide 方法（这会产生控制台错误） (ii) 设置可见属性为 trye 和 false.

这是我的按钮代码：

exporting: {
            buttons: {
                customButton: {
                    text: 'Hide/Show Y-Axis',
                    onclick: function () {

                       /* 
                       /// I get a console error trying to use the hide or show method
                       this.yAxis[0].visible ? this.yAxis[0].hide() : this.yAxis[0].show();

                          */ 

                    if (this.yAxis[0].visible || this.yAxis[1].visible || this.yAxis[2].visible)
                    {
                    this.yAxis[0].visible = false;
                    this.yAxis[1].visible = false;
                    this.yAxis[2].visible = false;
                    }
                    else
                    {
                    this.yAxis[0].visible = true;
                    this.yAxis[1].visible = true;
                    this.yAxis[2].visible = true;
                    } 

               this.redraw();

                    }
                } 
            }
        }

这似乎在到达 this.redraw() 时做了一些事情，但它没有隐藏轴。我在这里做错了什么？

完整代码：JSFiddle

谢谢

Answer 1

您需要在具有新 visible 状态的轴上使用 update 方法

这是更新 onclick 代码：

exporting: {
    buttons: {
      customButton: {
      text: 'Hide/Show Y-Axis',
      onclick: function() {
        this.yAxis.forEach((axis) => {
          axis.update({
            visible: !axis.visible
          })
        })
      }
    }
  }
}

已更新 fiddle：https://jsfiddle.net/8tmvjbhu/2/

Highcharts：在图表上添加一个按钮以隐藏或显示多个轴

Highcharts: Add a button on the chart to hide or show multiple axes

javascript

axes

highcharts