HighCharts下载CSV时能否切换至自定义原始数据源？

要实现下载CSV时切换为你预设的原始数据格式，我们可以通过自定义导出逻辑来替换Highcharts默认的CSV导出行为，具体步骤如下：

1. 定义目标导出数据 #

首先把你期望的CSV数据整理成二维数组，方便后续生成标准CSV格式：

// 预设你要导出的原始数据结构
const targetCSVData = [
  ["Date", "RawData1", "RawData2", "RawData3"],
  ["2018-01-01", 1, "RawData2", "RawData3"],
  ["2018-01-02", 2, "RawData2", "RawData3"],
  ["2018-01-03", 3, "RawData2", "RawData3"],
  ["2018-01-04", 4, "RawData2", "RawData3"],
  ["2018-01-05", 5, "RawData2", "RawData3"]
];

2. 编写CSV生成与下载工具函数 #

我们需要把二维数组转换成符合规范的CSV字符串，同时处理特殊字符（比如带逗号、引号的文本），再触发浏览器下载：

// 把二维数组转换成标准CSV字符串
function generateCSV(data) {
  return data.map(row => {
    return row.map(cell => {
      // 若字符串包含逗号或双引号，用双引号包裹并转义内部的双引号
      if (typeof cell === 'string' && (cell.includes(',') || cell.includes('"'))) {
        return `"${cell.replace(/"/g, '""')}"`;
      }
      return cell;
    }).join(',');
  }).join('\n');
}

// 触发CSV文件下载
function downloadCustomCSV() {
  const csvContent = generateCSV(targetCSVData);
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const downloadUrl = URL.createObjectURL(blob);
  
  // 创建临时下载链接并触发点击
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.setAttribute('download', 'custom-data.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

3. 集成到Highcharts导出菜单 #

如果你想用Highcharts自带的导出按钮来触发自定义下载，可以修改图表的导出配置，添加自定义菜单项：

Highcharts.chart('container', {
  // 你的原有图表配置
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] },
  series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }],
  
  exporting: {
    buttons: {
      contextButton: {
        // 自定义导出菜单，保留默认选项的同时添加自定义CSV下载
        menuItems: [
          {
            text: 'Download Custom CSV',
            onclick: downloadCustomCSV
          },
          'downloadPNG',
          'downloadJPEG',
          'downloadPDF',
          'downloadSVG'
        ]
      }
    }
  }
});

这样设置后，点击导出菜单里的「Download Custom CSV」，就会下载你预设的原始数据CSV文件，完全和图表当前展示的数据源区分开。

内容的提问来源于stack exchange，提问作者puff.tw