在 Highcharts 中，图例可以显示为下拉列表或选择全部取消选择所有图例的选项吗？答案

【问题标题】：In Highcharts can legends be shown as dropdown or option of select all deselect all legends?在 Highcharts 中，图例可以显示为下拉列表或选择全部取消选择所有图例的选项吗？
【发布时间】：2020-05-21 13:04:02
【问题描述】：

我正在使用 Highchart 并且在少数情况下会填充大量数据，底部显示大约 100 个图例。我的要求是我应该有一个全选或取消全选的选项。这在 Highchart 中可行吗？

【问题讨论】：

标签： highcharts selectall

【解决方案1】：

您可以使用linkedTo 功能并将每个系列锚定到负责在图例中切换可见性的虚拟系列。

演示：https://jsfiddle.net/BlackLabel/khce1uwp/

  series: [{
      id: 'main',
      name: "main legend",
      data: []
    },
    {
      name: 'Installation',
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
      linkedTo: 'main'
    }, ...
  ],

API：https://api.highcharts.com/highcharts/series.line.linkedTo

您可以创建一个自定义按钮来切换系列的可见性。

演示：https://jsfiddle.net/BlackLabel/4zLequ8v/

let btn = document.getElementById("btn"),
  seriesVisible = true;

btn.addEventListener('click', function() {
  if (seriesVisible) {
    chart.series.forEach(s => s.hide());
    seriesVisible = false
  } else {
    chart.series.forEach(s => s.show());
    seriesVisible = true
  }
})

【讨论】：