9

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

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

但没有效果。我们尝试使用重新绘制图表

chart.redraw()

但这没有任何效果……传说保持不变。

所以问题是：

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

3 回答 3

16

好吧，只是设置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];

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

于 2012-11-28T12:42:59.817 回答
6

您可以设置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
}

演示1

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

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

您忘记强制图表重绘。

演示

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

于 2012-11-28T12:43:59.823 回答
6

现在可以通过Series.update方法 ( API ) 解决这个问题，而无需任何黑客攻击。例如：

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

请参阅此 JSFiddle 演示。方法签名是：

update(Object options, [Boolean redraw])

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

于 2014-08-16T03:46:59.707 回答