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

Question

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

highcharts

29

我正在使用Highchart。我有一个多系列图表，每个系列都有自己的y轴。

就像这个（jsfiddle）

当我们点击系列的图例项时，它会隐藏该系列及其相关的y轴（使用showEmpty:false也可以隐藏轴的名称）

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

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

serie.yAxis.showAxis = false;

但它不起作用。有人知道我该怎么做吗？

编辑: 我设法编辑了文本，以便通过将文本设置为空来删除轴标题，但这还不足以隐藏整个轴和其值。

以下是我所做的编辑：

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

- Guian

没有官方的简单隐藏坐标轴的方法。我已经发布了一个功能请求，你可以在这里投票支持它。 - Dan Dascalescu

4个回答

6

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

yAxis: {
   title: false
},

这是一个例子：jsfiddle示例。

- GeoffreyMahugu

请注意，您还可以添加“visible: false”以使整个轴不可见。我相信这就是Op和其他人想要的。最后，这很简单！ - Midiman

-1

我们可以通过返回空字符串来隐藏Y轴标签，而不隐藏Y轴和系列，具体方法如下：

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

},

- Jagadeesh

-1

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

然而，如果你处于样式模式，这就比较棘手了。在这里，您必须为目标轴设置一个className，然后像这样设置CSS：

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

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

- Tito Leiva

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paweł Fus · Accepted Answer

Highcharts 4.1.9+

自从4.1.9版本以来，有一个选项Axis.visible可用于显示/隐藏轴线，演示: http://jsfiddle.net/3sembmfo/36/

旧版 Highcharts

这是 Highcharts 3.0 的新功能 - 允许实时更新轴线：chart.yAxis[0].update(object) - 因为 object 可以使用与创建图表相同的选项。例如：

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

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

编辑：

使用下面的片段只需调用axis.hide()和axis.show()来隐藏/显示轴。实时演示：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);