仅按可见系列过滤 Highcharts 的图例 [英] Filtering legend of a Highcharts by only visible series

问题描述

我们正在使用 Highcharts 并有一些复杂的图表，图表中大约有 75 个系列.该系列不用于整个图表，而仅用于三个月的范围.所以我们每年大约有 15 个系列，整个图表涵盖五年(大约 15*5 = 75 个系列).然而，Highcharts 在其图例中显示了所有 75 个图表.目标是仅将图例最小化为可见系列.我们能够确定 JS 代码中的相关系列，并尝试切换相关系列的showInLegend"标志，例如

We are using Highcharts and have some complex charts with roughly 75 series within on chart. The series are not used through the whole chart but only for range of three month. So we have about 15 series per year and the overall chart covers five years (makes roughly 15*5 = 75 series). However Highcharts displays all 75 charts within its legend. The goal is to minimize the legend to the visible series only. We are able to determine the related series in JS code and we tried to toggle the 'showInLegend' flags of the related series e.g.

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

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

but without effect. We tried to redraw the chart using

chart.redraw() 

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

but that has no effect...the legend remains unchanged.

所以问题是:

• 是否可以根据更新的 showInLegend 选项重新绘制图例?
• Highcharts 中是否有根据可见系列动态更新图例的机制?

推荐答案

好吧，仅仅设置 showInLegend 并不能解决问题，还有一些钩子需要处理

Well just setting the showInLegend doesn't do the trick, there are some more hooks that need to be taken care of

参考 Halvor Strand 的回答以获得更近的方法

Refer Halvor Strand's answer for a more recent way

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 可以是一个点或系列

where, item can be a point or series

var item = chart.series[1];

动态添加删除图例 |海图&Highstock@jsFiddle

这篇关于仅按可见系列过滤 Highcharts 的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！