将 Filter/Search Table 链接到 Highchart

Question

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

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

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

非常感谢suggestions/examples！

Answer 1

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

演示：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 table。

如果您想从 HTML table 中获取数据，这里有一个如何实现它的示例：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

将 Filter/Search Table 链接到 Highchart

Linking a Filter/Search Table to a Highchart

javascript

html-table

highcharts

tableau-api