Highchart - 在不隐藏系列的情况下显示/隐藏Y轴 [英] Highchart - show / hide an y-Axis without hiding the series

问题描述

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

非常像这个（jsfiddle）

当我们点击一​​个系列的图例项目时，它隐藏它和关联的y轴
（使用 showEmpty：false 帮助隐藏轴的名称）

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

我试图通过修改来隐藏它showAxis属性如下：

  serie.yAxis.showAxis = false; 
  

但它不起作用。
任何人都知道我应该怎么做？编辑：我设法编辑文本，所以我可以删除轴标题通过设置文本为空，但它不是足以隐藏整个坐标轴及其值。

这是我编辑文本所做的：

  serie.yAxis.axisTitle.attr（{
 text：null 
}）; 
  

解决方案

Highcharts 4.1.9 +

自4.1.9开始，有一个选项 Axis.visible ，可用于显示/隐藏轴，演示： http：// jsfiddle.net/3sembmfo/36/

旧版Highcharts

这是Highcharts 3.0的一个新功能 - 允许实时更新坐标轴： chart.yAxis [0] .update（object） - 由于对象采用相同的选项至于创建图表。例如：

  chart.yAxis [0] .update（{
 labels：{
 enabled：假
}，
 title：{
 text：null 
} 
}）; 
  

和jsFiddle： http://jsfiddle.net/39xBU/2/

编辑：

使用下面的代码片段通过调用 axis.hide（）和 axis.show来隐藏/显示坐标轴（）。现场演示： http://jsfiddle.net/39xBU/183/

 （函数（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.r安德（）; 
}）; 
}; 
 
 HC.Axis.prototype.show = function（）{
 this.visible = true; 
 this.render（）; 
 
 HC.each（this.plotLinesAndBands，function（plotLine）{
 plotLine.render（）; 
}）; 
}; 
}）（Highcharts）; 
  

I'm working with Highchart. I've got a multiple series graph in which each series have their own y-axis.

pretty much like this one (jsfiddle)

when we click on the legend item for a series, it hides it and the associated y-axis (using showEmpty:false helped hiding also the name of the axes)

What I'm trying to achieve is hiding the y-Axis of a given series without hiding the series itself.

I tried to hide it by modifying the showAxis property like this :

serie.yAxis.showAxis = false;

but it doesn't work. Anyone knows how I should do ?

EDIT : I managed to edit the text so I can remove the axis title by setting the text to null but its not enough to hide the whole axis and its values.

here's what i did to edit the text:

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

解决方案

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);

这篇关于Highchart - 在不隐藏系列的情况下显示/隐藏Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！