highcharts - Highchart - 显示/隐藏 y 轴而不隐藏系列

Question

我正在与 Highchart 合作。我有一个多系列图，其中每个系列都有自己的 y 轴。

很像这个（jsfiddle）

当我们单击系列的图例项时，它会隐藏它和相关的 y 轴（使用showEmpty:false帮助隐藏轴的名称）

我想要实现的是隐藏给定系列的 y 轴而不隐藏系列本身。

我试图通过像这样修改 showAxis 属性来隐藏它：

serie.yAxis.showAxis = false;

但它不起作用。任何人都知道我应该怎么做？

编辑：我设法编辑了文本，因此我可以通过将文本设置为 null 来删除轴标题，但它不足以隐藏整个轴及其值。

这是我为编辑文本所做的：

serie.yAxis.axisTitle.attr({
            text: null
        });

Answer 1

Highcharts 4.1.9+

Since 4.1.9, there is an option Axis.visible which can be used to show/hide an axis, demo: http://jsfiddle.net/3sembmfo/36/

Older versions of Highcharts

It's a new feature for Highcharts 3.0 - that allows to update axes in realtime: chart.yAxis[0].update(object) - as object takes the same options as for creating chart. For example:

        chart.yAxis[0].update({
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        });

And jsFiddle: http://jsfiddle.net/39xBU/2/

EDIT:

Use below snippet to hide/show axis by just calling axis.hide() and axis.show(). Live demo: http://jsfiddle.net/39xBU/183/

(function (HC) {
    var UNDEFINED;
    HC.wrap(HC.Axis.prototype, 'render', function (p) {
        if (typeof this.visible === 'undefined') {
            this.visible = true;
        }
        if(this.visible) {
            this.min = this.prevMin || this.min;
            this.max = this.prevMax || this.max;
        } else {
            this.prevMin = this.min;
            this.prevMax = this.max;
            this.min = UNDEFINED;
            this.max = UNDEFINED;
        }

        this.hasData = this.visible;

        p.call(this);
    });

    HC.Axis.prototype.hide = function () {
        this.visible = false;
        this.render();

        HC.each(this.plotLinesAndBands, function (plotLine) {
            plotLine.render();
        });
    };

    HC.Axis.prototype.show = function () {
        this.visible = true;
        this.render();

        HC.each(this.plotLinesAndBands, function (plotLine) {
            plotLine.render();
        });
    };
})(Highcharts);

Answer 2

它实际上变得更简单了。您只需将 yAxis 标题属性设置为 false：

yAxis: {
   title: false
},

这是一个示例：jsfiddle示例

Answer 3

我们可以通过返回空字符串来隐藏 Y 轴标签而不隐藏 y 轴而不隐藏系列，如下所示：

yAxis: {
       title: '',
       labels: {
                formatter: function() {
                    return '';
                },
                style: {
                    color: '#4572A7'
                }
        }

},

Answer 4

对于较新的版本（我使用的是 6.2.0），该yAxis属性有一个名为gridLineWidth的参数。只需将其设置为 0，该轴的网格就会消失。在这个 JSFiddle中有一个例子。

但是，如果您处于样式模式，这会比较棘手。在这里，您必须为目标轴设置一个类名，然后像这样设置 CSS：

.highcharts-yaxis-grid {
    &.right-axis {
      path {
        stroke: none;
      }
    }
  }

例如，这将使className设置为right-axis的轴的网格消失。这允许多轴具有不同的样式。