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

Question

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

我在图表上添加了一个按钮，并尝试了两种不同的方法来隐藏轴： (i) 在轴上使用 show 和 hide 方法（这会产生控制台错误） (ii) 将 visible 属性设置为 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

您需要在坐标轴上使用 update 方法并使用新的 visible 状态

这里是更新onclick代码：

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

更新小提琴：https://jsfiddle.net/8tmvjbhu/2/