如何从Datatables第一列提取数据设置Highcharts的X轴标题？

使用Datatables创建Highcharts图表，各项功能正常，但无法将表格第一列（Data1、Data2、Data3、Data4、Data5等）的数据提取作为Highcharts的X轴标题，对JavaScript了解有限，不清楚代码遗漏点。

预期图表效果：

当前代码中，Highcharts的X轴分类设置为Object.keys(salary)，实际取的是表格的年份列标题（2012、2013等），而非第一列的Data1、Data2这类内容。需要新增逻辑提取表格第一列的所有数据，作为X轴的分类值：

1. 新增函数提取第一列数据作为X轴分类
2. 修改Highcharts初始化时的X轴配置
3. 更新表格draw事件中的X轴刷新逻辑

HTML部分 #

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <meta charset=utf-8 />
  </head>
  <body>
    <div id="container" style=" width: 100%; height: 400px;"></div>
    <div class="container">
      <table id="example_full2" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Year</th>
            <th>2012</th>
            <th>2013</th>
            <th>2014</th>
            <th>2015</th>
            <th>2016</th>
            <th>2017</th>
            <th>2018</th>
            <th>2019</th>
            <th>2020</th>
            <th>2021</th>
          </tr>
        </thead>
        <tbody>
          <tr><td> Data1</td><td>3,823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
          <tr><td> Data2</td><td>800</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
          <tr><td> Data3</td><td>900</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
          <tr><td> Data4</td><td>200</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
          <tr><td> Data5</td><td>300</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
          <tr><td> Data6</td><td>400</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

JavaScript部分 #

$(document).ready(function() {
    var table = $("#example_full2").DataTable({
        searching: false,
        lengthChange: false,
        ordering: false,
        info: false,
        paging: false
    });

    // 获取所有行的第一列数据作为X轴分类
    function getXAxisCategories(table) {
        var categories = [];
        table.rows().every(function() {
            var data = this.data();
            categories.push(data[0].trim()); // 去除文本前后空格
        });
        return categories;
    }

    // 获取指定列的数值数据
    function getColumnData(table, columnIndex) {
        var data = [];
        table.rows().every(function() {
            var rowData = this.data();
            var value = rowData[columnIndex].replace(/[^0-9.]/g, "") * 1;
            data.push(value);
        });
        return data;
    }

    // 初始化各年份的系列数据
    var series = { name: "2012", data: getColumnData(table, 1) };
    var series2 = { name: "2013", data: getColumnData(table, 2) };
    var series3 = { name: "2014", data: getColumnData(table, 3) };
    var series4 = { name: "2015", data: getColumnData(table, 4) };
    var series5 = { name: "2016", data: getColumnData(table, 5) };

    // 初始化图表
    var myChart = Highcharts.chart("container", {
        chart: { type: "column" },
        title: { text: "Test Data" },
        xAxis: { categories: getXAxisCategories(table) },
        yAxis: {
            id: "salary",
            min: 0,
            title: { text: "Number" }
        },
        series: [series, series2, series3, series4, series5]
    });

    // 表格重绘时更新图表数据
    table.on("draw", function() {
        var categories = getXAxisCategories(table);
        myChart.xAxis[0].setCategories(categories);
        myChart.series[0].setData(getColumnData(table, 1));
        myChart.series[1].setData(getColumnData(table, 2));
        myChart.series[2].setData(getColumnData(table, 3));
        myChart.series[3].setData(getColumnData(table, 4));
        myChart.series[4].setData(getColumnData(table, 5));
    });
});

• 新增getXAxisCategories函数：遍历表格所有行，提取每行第一列的内容作为X轴分类，同时去除文本前后空格
• 重构getColumnData函数：改为按列索引提取数据，适配系列数据的需求，更符合图表的行列对应逻辑
• 修改Highcharts初始化的X轴配置：直接使用getXAxisCategories的返回值作为分类
• 更新draw事件：不仅更新X轴分类，同时更新所有系列的数据，保证表格变化时图表同步更新

内容的提问来源于stack exchange，提问作者magicsinger