javascript - 如何在页面加载中将启用属性设置为 highcharts 行

Question

如果你想了解我的需求，首先你必须看这个演示highcharts demo。现在，从该演示图表中单击“东京”，该东京线将消失。现在我希望能够在页面加载中设置该属性，我的意思是每当加载页面时，都应单击东京链接，并且只应显示一行，当我单击东京时，应显示东京行 。您可以从该演示本身找到源代码，提前谢谢您。

Answer 1

我认为您所追求的是一种仅显示点击的图例系列的方法。如果是这种情况，您可以使用 plotOptions.series.events.legendItemClick 来完成此操作。 。要让一个系列最初显示在图表上(但仍显示在图例中)，您需要设置该系列' visible属性设置为 true，其他设置为 false。如果您想让所有系列在初始加载时显示，则可以忽略该步骤。

要使切换正常工作，您需要获取您单击的图例项目的索引。然后，您可以循环遍历图表中的所有系列，以找到与点击索引相匹配的系列。当它匹配时，您设置 series\[i\].show()对于那些没有设置的 series.hide() .

这是基本的切换代码:

series: {
    events: {
        legendItemClick: function (event) {
            var seriesIndex = this.index;
            var serie = this.chart.series;
            console.log(seriesIndex);
            for (i = 0; i < serie.length; i++) {                  
                if (serie[i].index == seriesIndex) {
                    serie[i].show();
                    console.log(serie[i].index);
                } else {
                    serie[i].hide();
                }
            }
            return false;
        }
    }
}

这是现场直播 fiddle .