我目前在我的网站上使用Highcharts。在我的一个图表(基本柱形图)中,我有多个系列,我可以点击底部显示的名称来显示/隐藏。
我可以有很多系列,我想同时将系列数量限制为3。这意味着当它加载图形时,它只显示3个系列,而其他系列没有显示。如果我点击第4个系列,原先出现的3个系列中的一个将消失,因此活动系列的数量始终保持为3个。
我一直在寻找它,我发现我需要在plotOptions.series字段中进行一些修改,然后我深入研究了Highcharts API参考,但没有找到我想要的东西。我对代码的第一次尝试是这样的:
$('#container').highcharts({
plotOptions:{
series: {
var series = this.series;
var nb_of_visible_series = 0;
//Here i count the number of visible series
for(var i=0; i<series.length; i++) {
if(series[i].visible) {
nb_of_visible_series++:
}
}
//If too many series are visible I'll randomly
//hide as many series as necessary
if(nb_of_visible_series>3) {
var nb_of_series_to_hide = nb_of_visible_series-3;
while(nb_of_series_to_hide>0) {
var i=Math.floor(Math.random()*series.length);
if(series[i].visible) {
series[i].hide()
nb_of_series_to_hide--;
}
}
}
}
}
}
所以这就是这个想法,但我不知道在哪里把它变为真实的(不是直接在plotOptions.series
字段,就像我猜的那样?)。我可以把它放在plotOptions.series.events.legentItemClick
中,但是在加载图表时不会考虑它。
我正在寻找关于我的代码的一些跟踪和建议(我是一个JS初学者),并在此先感谢你。抱歉我的英语很差。
答案 0 :(得分:0)
确定您编写的代码无效。 Highcharts的选项应该是javascript对象,而不是变量,选项等之间混合的东西。
1)仅在init上显示三个系列预处理数据,如下所示:
var series = [{ data: [..], name: 'name 1' ..} , { data: [..], name: 'name 2' ..} , ... , {data: [..], name: 'name n'}];
for (var i = 0, len = series.length; i < len; i++) {
series[i].visible = i < 3; //setup variable series.visible to show/hide on init load.
}
$('#container').highcharts({
series: series //pass variable with updated visible option
});
2)正如您所注意到的,您需要为legendItemClick
编写自己的函数,该函数将检查可见的系列数(循环chart.series
和计数series.visible == true
)。然后使用series.hide() / series.show()
隐藏/显示特定系列。