Highcharts Plotoptions Series

Highcharts Plotoptions Series

本文关键字：Series Plotoptions Highcharts      更新时间：2023-09-26

我目前正在我的网站中使用Highcharts。在我的一个图表（基本柱形图）中，我有多个系列，我可以单击底部显示的名称来显示/隐藏。

我可以有很多系列，我想同时将系列的数量限制在3个。这意味着当它加载图形时，它只显示3个系列，其他的都没有显示。如果我点击第四个序列，最初出现的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初学者），并提前感谢您。很抱歉我英语不好。

当然，您编写的代码不会工作。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()隐藏/显示特定系列。

相关文章：