我正在使用Highchart。 我有一个多系列图,其中每个系列都有自己的y轴。
pretty much like this one (jsfiddle)
当我们点击一个系列的图例项时,它会隐藏它和相关的y轴
(使用showEmpty:false
帮助隐藏了轴的名称)
我想要实现的是隐藏给定系列的y轴而不隐藏系列本身。
我试图通过修改showAxis属性来隐藏它:
serie.yAxis.showAxis = false;
但它不起作用。 谁知道我应该怎么做?
编辑:我设法编辑了文本,因此我可以通过将文本设置为null来删除轴标题,但它不足以隐藏整个轴及其值。
这是我编辑文本时所做的:
serie.yAxis.axisTitle.attr({
text: null
});
答案 0 :(得分:48)
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: 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);
答案 1 :(得分:1)
答案 2 :(得分:0)
我们可以通过返回空字符串来隐藏Yaxis标签而不隐藏y轴而不隐藏序列:
yAxis: {
title: '',
labels: {
formatter: function() {
return '';
},
style: {
color: '#4572A7'
}
}
},
答案 3 :(得分:0)
对于较新的版本(我使用的是6.2.0),yAxis
属性具有一个名为gridLineWidth的参数。只需将其设置为0,该轴的网格将消失。 In this JSFiddle就是一个例子。
但是,如果您在styled mode中,这会比较棘手。在这里,您必须为目标轴设置一个className,然后像这样设置CSS:
.highcharts-yaxis-grid {
&.right-axis {
path {
stroke: none;
}
}
}
例如,这将使className
设置为 right-axis 的轴网格消失。这样就可以为多轴使用不同的样式。