基于Highcharts构建多列Heatmap：自定义表格数据传入方法咨询

核心思路 #

Highcharts 热力图原生接受 [[x坐标, y坐标, 热力值]] 格式的二维数组数据。针对你的需求，需要把后端API返回的结构化数据（包含Y轴非热力列、n个热力数值列）转换为这种格式，同时保留Y轴非热力列的信息用于标签或提示框展示。

数据转换步骤 #

假设后端API返回的JSON结构如下（示例）：

[
  { "yCol1": "组A-01", "yCol2": "类型X", "column1": 28, "column2": 45, "column3": 62 },
  { "yCol1": "组A-02", "yCol2": "类型Y", "column1": 35, "column2": 52, "column3": 70 },
  { "yCol1": "组B-01", "yCol2": "类型X", "column1": 22, "column2": 38, "column3": 55 }
]

其中 yCol1/yCol2 是Y轴非热力列，column1-column3 是热力数值列。转换逻辑：

• 每一行数据对应热力图的一个Y坐标（用数组索引标记，如第0行、第1行）
• 每个热力数值列对应一个X坐标（用列的索引标记，如column1对应X=0）
• 提取每个单元格的数值作为热力点的value
• 单独保存Y轴非热力列的数据，用于Y轴标签或tooltip展示

代码实现示例 #

// 模拟API返回数据
const apiResponse = [
  { "yCol1": "组A-01", "yCol2": "类型X", "column1": 28, "column2": 45, "column3": 62 },
  { "yCol1": "组A-02", "yCol2": "类型Y", "column1": 35, "column2": 52, "column3": 70 },
  { "yCol1": "组B-01", "yCol2": "类型X", "column1": 22, "column2": 38, "column3": 55 },
  { "yCol1": "组B-02", "yCol2": "类型Y", "column1": 40, "column2": 58, "column3": 75 },
  { "yCol1": "组C-01", "yCol2": "类型X", "column1": 18, "column2": 32, "column3": 48 },
  { "yCol1": "组C-02", "yCol2": "类型Y", "column1": 25, "column2": 42, "column3": 60 },
  { "yCol1": "组D-01", "yCol2": "类型X", "column1": 30, "column2": 48, "column3": 65 }
];

// 处理数据
const heatmapData = [];
const yAxisInfo = [];
// 筛选出所有热力数值列的key
const heatColumnKeys = Object.keys(apiResponse[0]).filter(key => key.startsWith('column'));

apiResponse.forEach((row, yIndex) => {
  // 保存Y轴非热力列信息，用于标签和tooltip
  const nonHeatLabels = Object.entries(row)
    .filter(([key]) => !key.startsWith('column'))
    .map(([key, val]) => `${key}: ${val}`);
  yAxisInfo.push(nonHeatLabels.join('<br/>'));

  // 生成热力图数据点
  heatColumnKeys.forEach((colKey, xIndex) => {
    heatmapData.push([xIndex, yIndex, row[colKey]]);
  });
});

// 初始化热力图
Highcharts.chart('heatmap-container', {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80
  },
  xAxis: {
    categories: heatColumnKeys,
    title: { text: '热力数值列' }
  },
  yAxis: {
    categories: yAxisInfo,
    title: { text: 'Y轴标识列' },
    max: 5, // 限制最多显示6行（索引0-5）
    scrollbar: { enabled: true } // 超过6行时启用滚动条
  },
  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: '热力数值',
    borderWidth: 1,
    data: heatmapData,
    dataLabels: {
      enabled: true,
      color: '#000000'
    },
    tooltip: {
      formatter: function() {
        return `<b>Y轴信息:</b><br/>${yAxisInfo[this.point.y]}<br/><b>${heatColumnKeys[this.point.x]}:</b> ${this.point.value}`;
      }
    }
  }]
});

关键配置说明 #

• Y轴行数限制：通过 yAxis.max: 5 实现最多显示6行，若数据超过6行，可启用 scrollbar 实现滚动查看
• Tooltip自定义：将Y轴非热力列的所有信息展示在提示框中，提升数据可读性
• 数据兼容性：只要后端返回的结构统一，不管n是多少，都能自动适配生成热力点

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