如何将Highcharts热图导出CSV表头改为‘Intent name’和‘count’？

问题描述 #

我使用的是Highcharts树图（注：你提到的“热图”为笔误，代码中实际是treemap类型），当前导出CSV时表头显示为“Category”和“count”，但我需要将表头改为“Intent name”和“count”。搜索后未找到针对树图的有效解决方案，不清楚“Category”的来源及修改方法，寻求技术建议。

解决方案 #

1. 明确“Category”的来源 #

树图的默认导出逻辑会读取数据点中的category字段作为第一列的表头，你的数据里每个点都包含"category": ""的空值，因此导出时表头默认显示“Category”。

2. 两种自定义导出表头的实现方式 #

方式一：仅修改表头文本

通过配置exporting.csv.columnHeaderFormatter回调函数，直接替换指定列的表头名称：

exporting: {
  csv: {
    columnHeaderFormatter: function(item, key, column) {
      // 将第一列的"Category"替换为"Intent name"
      if (key === 'category') {
        return 'Intent name';
      }
      // 保留其他列的原有表头
      return item || key;
    }
  }
}

方式二：完全自定义导出数据（更灵活）

如果需要替换第一列的数据源（比如用name字段而非空的category），可以使用exporting.csv.dataFormatter完全控制导出内容：

exporting: {
  csv: {
    dataFormatter: function(series) {
      // 自定义表头行
      let csvContent = 'Intent name,count\n';
      // 遍历数据点，提取名称和数值
      series[0].data.forEach(point => {
        csvContent += `${point.name},${point.value}\n`;
      });
      return csvContent;
    }
  }
}

3. 修改后的完整配置示例 #

将上述配置整合到你的图表代码中，示例如下：

Highcharts.chart('container', {
  chart: {
    height: "50%",
    marginRight: 200,
    marginLeft: 200
  },
  tooltip: {},
  colorAxis: {
    min: 0,
    max: 50,
    endOnTick: false,
    minColor: "#ffffff",
    maxColor: "#00CF64",
    reversed: true
  },
  legend: {
    symbolWidth: 500
  },
  // 添加导出配置
  exporting: {
    csv: {
      dataFormatter: function(series) {
        let csvContent = 'Intent name,count\n';
        series[0].data.forEach(point => {
          csvContent += `${point.name},${point.value}\n`;
        });
        return csvContent;
      }
    }
  },
  series: [
    {
      name: "count",
      type: "treemap",
      borderColor: "#fff",
      borderRadius: 1,
      borderWidth: 1,
      colorKey: "value",
      layoutAlgorithm: "squarified",
      clip: false,
      dataLabels: {
        style: {
          textOutline: "none"
        }
      },
      data: [
        {
          "article_name": "Help",
          "category": "",
          "language_utterance_map": {"en": 5},
          "total_utterances": 5,
          "name": "Help",
          "value": 5,
          "languageData": "<b>en:</b> 5"
        },
        {
          "article_name": "Default fallback intent",
          "category": "",
          "language_utterance_map": {"en": 0},
          "total_utterances": 0,
          "name": "Default fallback intent",
          "value": 0,
          "languageData": "<b>en:</b> 0"
        },
        // 其余数据点保持不变
        {
          "article_name": "Goodbye",
          "category": "",
          "language_utterance_map": {"en": 15},
          "total_utterances": 15,
          "name": "Goodbye",
          "value": 15,
          "languageData": "<b>en:</b> 15"
        },
        {
          "article_name": "Greetings",
          "category": "",
          "language_utterance_map": {"en": 24},
          "total_utterances": 24,
          "name": "Greetings",
          "value": 24,
          "languageData": "<b>en:</b> 24"
        },
        {
          "article_name": "Not helpful",
          "category": "",
          "language_utterance_map": {"en": 28},
          "total_utterances": 28,
          "name": "Not helpful",
          "value": 28,
          "languageData": "<b>en:</b> 28"
        },
        {
          "article_name": "Thank you",
          "category": "",
          "language_utterance_map": {"en": 11},
          "total_utterances": 11,
          "name": "Thank you",
          "value": 11,
          "languageData": "<b>en:</b> 11"
        },
        {
          "article_name": "Talk to an agent",
          "category": "",
          "language_utterance_map": {"en": 6},
          "total_utterances": 6,
          "name": "Talk to an agent",
          "value": 6,
          "languageData": "<b>en:</b> 6"
        },
        {
          "article_name": "Flight booking",
          "category": "",
          "language_utterance_map": {"en": 4},
          "total_utterances": 4,
          "name": "Flight booking",
          "value": 4,
          "languageData": "<b>en:</b> 4"
        },
        {
          "article_name": "Interest rate",
          "category": "",
          "language_utterance_map": {"en": 4},
          "total_utterances": 4,
          "name": "Interest rate",
          "value": 4,
          "languageData": "<b>en:</b> 4"
        },
        {
          "article_name": "Home loan",
          "category": "",
          "language_utterance_map": {"en": 8},
          "total_utterances": 8,
          "name": "Home loan",
          "value": 8,
          "languageData": "<b>en:</b> 8"
        },
        {
          "article_name": "movie ticket booking",
          "category": "",
          "language_utterance_map": {"en": 4},
          "total_utterances": 4,
          "name": "movie ticket booking",
          "value": 4,
          "languageData": "<b>en:</b> 4"
        }
      ]
    }
  ],
  title: {
    text: "Utterances per intent"
  }
});

补充说明 #

• 方式一适合仅修改表头文本的场景，数据沿用默认导出字段；
• 方式二更适合需要替换导出数据源的场景（比如你的category字段为空，实际应使用name字段作为第一列内容）；
• 你提到的“热图”实际是树图（treemap），Highcharts的热图（heatmap）导出逻辑不同，这也是之前搜索热图方案无效的原因。

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