如何配置Highcharts基础柱形图数据表格 实现行列转置与列排序

完全可以实现先创建图表再生成符合要求的数据表格，不需要提前构建表格再生成图表。Highcharts暴露了完整的图表数据读取API，你可以直接从已生成的图表实例中提取所有需要的表格数据，具体实现逻辑如下：

核心实现步骤 #

1. 提取图表数据完成行列转置

你初始化Highcharts时返回的图表实例（通常命名为chart）中已经包含所有你需要的数据，直接读取即可：

• x轴类目数据可以通过chart.xAxis[0].categories获取，这部分内容直接作为数据表格的列标题
• 图表的所有系列数据可以通过chart.series数组遍历获取，每个系列的name属性作为表格的行首分类，每个系列下data数组中对应点位的y值就是对应列的单元格数值

你可以参考以下示例代码逻辑实现数据提取：

// 点击查看数据表格的触发逻辑
document.querySelector('#viewTableBtn').addEventListener('click', () => {
  // 提取x轴类目作为表格列标题
  const tableColHeaders = ['系列名称', ...chart.xAxis[0].categories];
  // 提取所有系列的行数据
  const tableRows = chart.series.map(series => {
    const rowValues = series.data.map(point => point.y);
    return [series.name, ...rowValues];
  });
  // 后续自行渲染表格即可，已经完成行列转置要求
})

按照上述逻辑生成的表格，就完全实现了x轴内容作为列标题的转置需求。

2. 实现表格列排序功能

表格排序和图表生成逻辑完全独立，你只需要给渲染完成的表格表头绑定点击事件即可：

• 点击对应列表头时，获取当前列的索引
• 把所有表格行数据按照当前列的数值做升序/降序重排
• 重排完成后重新渲染表格内容即可，不需要和图表逻辑做任何绑定

额外优化提示 #

如果你使用Highcharts官方自带的导出模块，也可以直接修改exporting.table配置项自定义表格生成规则，不需要自行写全量的表格渲染逻辑，只需要配置表头生成规则为x轴类目即可实现转置需求。

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