如何在页面加载中将启用属性设置为高图表行

Question

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

Answer 1

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

要使切换开关正常工作，您需要获取单击的图例项的索引。然后，循环遍历图表中的所有序列，以查找与单击的索引匹配的序列。当它匹配时，您为未设置series.hide()的那些设置series[i].show()。

以下是基本的切换代码：

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;
        }
    }
}

这是一个现场小提琴。

Answer 2

创建图表时，只需为默认情况下应隐藏的系列设置series.visible = false。

请参阅文档。