我有一些使用 Highcharts 的折线图,我需要隐藏除用户选择的数据系列之外的所有数据系列。示例页面可在http://opheliadesign.com/weight找到。
例如,在“身体成分”下,单击“脂肪”会隐藏骨骼、水和 BMI - 从而可以更轻松地查看体脂肪图。
谢谢!
我有一些使用 Highcharts 的折线图,我需要隐藏除用户选择的数据系列之外的所有数据系列。示例页面可在http://opheliadesign.com/weight找到。
例如,在“身体成分”下,单击“脂肪”会隐藏骨骼、水和 BMI - 从而可以更轻松地查看体脂肪图。
谢谢!
我不相信 highcharts 有hideAll()
或类似的功能,但你可以尝试这样的事情:
//assuming chart is your chart
series = chart.series;
for(var i = 0; i < series.length; i++) {
if(!series[i].selected) {
series[i].hide(); //Hide the series
}
}
然后,您只需在选择系列时调用该代码。您可以通过使用图表事件执行某种检查来做到这一点
相当老的线程,但信息仍然有用。
正如@Alvara 指出的那样,有数百个系列,使用.hide()
or.show()
非常慢(浏览器冻结几秒钟)。
使用setVisible(false, false)
andsetVisible(true, false)
更快:
legendItemClick: function (event) {
if (!this.visible) return true;
const series = this.chart.series;
const serieLen = series.length;
if (series.filter(s => s.visible).length === 1) {
for (let i = 0; i < serieLen; i += 1) {
series[i].setVisible(true, false);
}
} else {
for (let i = 0; i < serieLen; i += 1) {
series[i].setVisible(false, false);
}
series[this.index].setVisible(true, false);
}
return false;
};
即使是大系列,它也能立即发挥作用。
在 +50 系列上使用.show().hide()
已经需要超过 2 秒来切换可见系列(https://jsfiddle.net/rockshappy/nL5j2rLa/5/)
这里使用setVisible
是瞬时的(https://jsfiddle.net/rockshappy/nL5j2rLa/2/)