数据表和Highcharts - table.on('draw' 和函数chartData(table)

Question

我设法或多或少地按照我想要的方式构建了一个 Highcharts，基于一个类似于我可以通过 Datatables 获得的表格，请参阅工作示例。 不幸的是，当我将 Highcharts 链接到我的数据表时，Highcharts 是空白的，可能是因为我缺少

table.on('draw', function () {
});

和

function chartData(table) {
}

我的 js 的一部分，如这里或这里所述。

你知道我如何编写这些部分来适合我的情况吗？我不需要对数据进行计数、求和或平均，只需读取数据表中的值即可。

Answer 1

您可以基于数据表构建Highcharts系列结构。例如：

const table = new DataTable('#example1');
const chart = Highcharts.chart("container", {
  chart: {
    type: "line"
  },
  title: {
    text: "Test Data"
  },
  xAxis: {
    type: 'category'
  },
  series: chartSeries(table)
});

table.on('draw', function() {
  chart.update({
    series: chartSeries(table)
  }, true, true);
});

function chartSeries(table) {
  const series = [];
  // Count the number of entries for each office
  table
    .rows({
      search: 'applied'
    })
    .data()
    .each(function(rowData, a, b) {
      const xData = rowData[0];

      rowData.forEach((data, index) => {
        if (index) {
          if (!series[index - 1]) {
            series[index - 1] = {
              name: $(table.column(index).header()).html(),
              data: []
            };
          }

          series[index - 1].data.push({
            name: xData,
            y: parseFloat(data.replace(/,/g, ''))
          });
        }
      });
    });

  return series;
}

---

现场演示：https://jsfiddle.net/BlackLabel/jtxw8b5d/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Chart#update