如何编写Datatables的draw事件与chartData函数以适配Highcharts？

算力阿峰

2026-7-14

解决Datatables关联Highcharts后图表空白的问题

针对你的场景（直接读取Datatables数据，无需计数、求和或平均等聚合操作），可以按以下方式编写所需的两个代码部分：

1. `chartData` 函数：提取Datatables原始数据

这个函数负责从Datatables实例中直接读取表格数据，无需额外计算：

function chartData(table) {
  // 获取Datatables的全部原始数据（不受分页、过滤影响）
  // 若仅需当前页/过滤后的数据，改用 table.rows({ search: 'applied' }).data()
  const tableData = table.rows().data();
  // 根据你的表格列结构调整索引：示例中第一列为X轴类别，第二列为Y轴数值
  const categories = [];
  const values = [];

  tableData.forEach(row => {
    categories.push(row[0]); // 替换为你实际的类别列索引
    values.push(parseFloat(row[1])); // 替换为你实际的数值列索引，转换为数字类型
  });

  return {
    categories: categories,
    seriesData: values
  };
}

2. `draw` 事件监听：同步图表与Datatables更新

当Datatables因分页、排序、过滤触发重绘时，自动更新Highcharts图表：

// 假设你的Datatables实例为table，Highcharts实例为chart
table.on('draw', function () {
  const latestData = chartData(table);
  // 更新图表的X轴类别和系列数据
  chart.update({
    xAxis: {
      categories: latestData.categories
    },
    series: [{
      name: '自定义系列名称', // 替换为你的系列名称
      data: latestData.seriesData
    }]
  });
});

额外提示

页面加载时，需手动用chartData的数据初始化图表，避免初始空白：

const chart = Highcharts.chart('container', {
  // 其他图表配置项
  xAxis: {
    categories: chartData(table).categories
  },
  series: [{
    name: '自定义系列名称',
    data: chartData(table).seriesData
  }]
});