javascript - 将过滤器/搜索表链接到 Highchart

Question

我有兴趣做类似于下面的 Tableau 示例的事情，但使用 Highcharts 多系列股票图表:

https://www.tableau.com/trial/tableau-software#reveal--2

最后，我还想在表格中添加图形，例如净收入可能是一个带有红色或绿色阴影的图标，具体取决于盈利能力。

非常感谢任何建议/示例!

Answer 1

在 Highcharts 网站上，它看起来像一个包含许多系列的常规折线图，这些系列按颜色分组。我创建了一个非常简单的类似示例，其中系列或颜色组在复选框按钮上隐藏/显示。

演示:https://jsfiddle.net/BlackLabel/pwan27hq/1/

tests.forEach(test => {
  test.addEventListener("click", function() {
    chart.series.forEach(s => {
      if (s.userOptions.id == this.id) {
        if (s.visible) {
          s.hide()
        } else {
          s.show()
        }
      }
    })
  })
})

您需要做的就是设置它们的样式并使用数据创建一个 HTML 表格。

如果您想从 HTML 表格中获取数据，这里有一个实现方法的示例:https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-parsed/

API:https://www.highcharts.com/docs/working-with-data/data-module