添加

Question

我们正在使用Highcharts，并且在图表中有大约75个系列的复杂图表。该系列不是在整个图表中使用，而是仅在三个月的范围内使用。所以我们每年大约有15个系列，整体图表涵盖五年（大约15 * 5 = 75系列）。但是，Highcharts会在其图例中显示所有75个图表。目标是仅将可见系列的图例最小化。我们能够确定JS代码中的相关系列，并且我们试图切换相关系列的'showInLegend'标志，例如。

chart.series[24].options.showInLegend = false

但没有效果。我们尝试使用

重绘图表

chart.redraw()

但这没有效果......图例保持不变。

所以问题是：

是否可以根据更新后的showInLegend选项重新绘制图例？
是否在Highcharts中有基于可见系列动态更新图例的机制？

Answer 1

设置showInLegend并不起作用，还有一些需要处理的钩子

请参阅Halvor Strand的答案以获取更新的方式

旧技巧但仍有效

添加

item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.render();

删除

item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();

其中，item可以是一个点或系列

var item = chart.series[1];

<强> Add Remove Legend Dynamically | Highchart & Highstock @ jsFiddle

Answer 2

创建图表时，您可以将showInLegend设置为false。

{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    showInLegend: false
}

demo1

如果您想动态更新它，可以执行以下操作。

options.series[1].showInLegend = false;
chart = new Highcharts.Chart(options);

你忘了强制图表重绘。

demo

或chart.legend.allItems[1].destroy();删除第一个。

Answer 3

现在可以通过Series.update方法（API）解决此问题。例如：

chart.series[0].update({ showInLegend: false });

见this JSFiddle demonstration。方法签名是：

update(Object options, [Boolean redraw])

options是任何常规Series对象的选项。您可以选择暂停重绘以在重绘之前更改多个选项。

仅通过可见系列过滤Highcharts的图例

3 个答案:

旧技巧但仍有效

添加

删除