如何修改Highcharts代码，实现DataTable行列转换以年份为X轴

要实现年份作为X轴、原分类作为折线图系列的需求，需要调整数据提取逻辑，具体修改如下：

核心调整点 #

• 提取X轴年份：从表格每行的第一个单元格获取年份，作为X轴分类
• 重构系列数据：将表格表头（排除第一列年份和最后一列）作为系列名称，对应列的所有行数据作为系列数值数组

修改后的完整代码 #

$(document).ready(function() {
  var allSeriesData = [];
  var years = [];

  var table = $("#example1").DataTable({
    initComplete: function(settings, json) {
      let api = new $.fn.dataTable.Api(settings);

      // 提取X轴年份：遍历每行，取第一个单元格内容
      let rows = api.rows().data().toArray();
      rows.forEach(function(row) {
        years.push(row[0]);
      });

      // 提取系列数据：表头作为系列名，对应列数据作为系列值
      var headers = api.columns().header().toArray();
      headers.forEach(function(heading, index) {
        // 跳过第一列（年份列）和最后一列
        if (index > 0 && index < headers.length - 1) {
          let seriesName = $(heading).html();
          let seriesData = [];
          // 遍历每行，提取当前列的数值并格式化
          rows.forEach(function(row) {
            seriesData.push(parseFloat(row[index].replace(/,/g, '')));
          });
          allSeriesData.push({
            name: seriesName,
            data: seriesData
          });
        }
      });
    }
  });

  var myChart = Highcharts.chart("container", {
    chart: {
      type: "line"
    },
    title: {
      text: "Test Data"
    },
    xAxis: {
      categories: years,
      title: {
        text: "年份"
      }
    },
    yAxis: {
      title: {
        text: "数值"
      }
    },
    series: allSeriesData
  });

});

代码说明 #

1. X轴处理：遍历表格所有行，将每行首单元格的年份存入years数组，直接作为Highcharts X轴的分类项
2. 系列数据处理：遍历表头（排除年份列和末尾列），每个表头对应一个折线系列；再遍历所有行，提取对应列的数值并去除千分位逗号，转为数字后组成该系列的数据数组
3. 图表优化：新增X轴、Y轴标题，提升图表可读性

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