如何从DataTable生成指定样式的Highcharts图表？

要生成目标样式的分组柱状图，需要调整DataTable数据提取逻辑，让X轴对应年份，Data1/Data2/Data3各作为独立系列，具体修改如下：

关键调整点 #

• X轴分类：从表格第一列（Year）提取所有年份作为X轴标签
• 系列数据：分别收集Data1、Data2、Data3列的数值，每个列对应一个图表系列
• 数据格式化：移除数值中的千分位逗号，转换为浮点数

修改后的完整代码 #

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 />
    <title>DataTables - Highcharts Demo</title>
  </head>
  <body>
    <div id="container" style="width:100%; height:400px;"></div>
    <div class="container">
      <table id="example1" class="display nowrap" width="100%">
        <thead>
          <tr>
             <th>Year</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
            <th>Total</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Year</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
            <th>Total</th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td scope="row" style=" text-align: center;">2015</td>
            <td style=" text-align: center;">10,000</td>
            <td style=" text-align: center;">19,000</td>
            <td style=" text-align: center;">5000</td>
            <td style=" text-align: center;">5000</td>
          </tr>
          <tr>
            <td scope="row" style=" text-align: center;">2016</td>
            <td style=" text-align: center;">22,142</td>
            <td style=" text-align: center;">18,481</td>
            <td style=" text-align: center;">877</td>
            <td style=" text-align: center;">41,500</td>
          </tr>
          <tr>
            <td scope="row" style=" text-align: center;">2017</td>
            <td style=" text-align: center;">20,038</td>
            <td style=" text-align: center;">16,700</td>
            <td style=" text-align: center;">658</td>
            <td style=" text-align: center;">37,396</td>
          </tr>
          <tr>
            <td scope="row" style=" text-align: center;">2018</td>
            <td style=" text-align: center;">22,195</td>
            <td style=" text-align: center;">16,489</td>
            <td style=" text-align: center;">796</td>
            <td style=" text-align: center;">39,480</td>
          </tr>
          <tr>
            <td scope="row" style=" text-align: center;">2019</td>
            <td style=" text-align: center;">21,836</td>
            <td style=" text-align: center;">13,958</td>
            <td style=" text-align: center;">1,239</td>
            <td style=" text-align: center;">37,033</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

JavaScript部分 #

$(document).ready(function() {
  let xCategories = [];
  let seriesData = [
    { name: 'Data1', data: [] },
    { name: 'Data2', data: [] },
    { name: 'Data3', data: [] }
  ];

  $("#example1").DataTable({
    initComplete: function(settings) {
      const api = new $.fn.dataTable.Api(settings);
      
      // 提取X轴年份分类
      api.column(0).data().each(year => {
        xCategories.push(year);
      });

      // 提取各数据列的数值
      api.rows().every(function() {
        const rowData = this.data();
        // 处理Data1（第1列，索引从0开始）
        seriesData[0].data.push(parseFloat(rowData[1].replace(/,/g, '')));
        // 处理Data2（第2列）
        seriesData[1].data.push(parseFloat(rowData[2].replace(/,/g, '')));
        // 处理Data3（第3列）
        seriesData[2].data.push(parseFloat(rowData[3].replace(/,/g, '')));
      });

      // 生成Highcharts图表
      Highcharts.chart("container", {
        chart: { type: "column" },
        title: { text: "年度数据统计" },
        xAxis: { categories: xCategories, title: { text: "年份" } },
        yAxis: { title: { text: "数值" } },
        tooltip: { shared: true },
        series: seriesData
      });
    }
  });
});

代码说明 #

1. 数据提取逻辑：
   • 用api.column(0).data()获取所有年份，作为X轴分类
   • 遍历每一行数据，分别提取Data1/Data2/Data3列的数值，去除千分位逗号后转为数字，存入对应系列的data数组
2. 图表配置：
   • 设置tooltip.shared: true实现分组 tooltip 展示
   • 为X/Y轴添加标题，提升图表可读性
   • 每个数据列对应一个独立系列，自动生成分组柱状图

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