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

问题描述

我们使用的是Highcharts，在图表上有一些大约有75个系列的复杂图表。
该系列不是通过整个图表使用，但只能用于三个月的范围。因此，我们每年约有15个系列，整体图表涵盖五年（约15 * 5 = 75系列）。然而，Highcharts显示其图例中的所有75个图表。目标是最小化对可见系列的图例。我们可以在JS代码中确定相关的系列，我们尝试切换相关系列的showInLegend标志，例如

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

我们尝试使用

重新绘制图表。

  chart.redraw（）
  

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

所以问题是： p>

• 是否可以根据更新的showInLegend选项重新绘制图例？


• 根据可见的系列动态更新图例？

解决方案

c $ c> showInLegend 不会做的，还有一些钩子需要照顾

参考Halvor Strand的回答

b >添加

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

添加动态删除图标| Highchart& Highstock @ jsFiddle

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.

So the questions are:

• is it possible to redraw the legend based on the updated showInLegend options?
• is there mechanism in Highcharts to dynamically updated the legend based on the visible series?

解决方案

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

Refer Halvor Strand's answer for a more recent way

---

Old trick but still works

To Add

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

To Remove

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

where, item can be a point or series

var item = chart.series[1];

Add Remove Legend Dynamically | Highchart & Highstock @ jsFiddle

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