如何为Highstocks图表导出的CSV文件添加Y轴最小/最大值？

方法一：自定义CSV格式化函数添加最值信息 #

通过Highstocks的exporting.csv.formatter配置项，直接修改导出的CSV内容，把Y轴的最小值和最大值插入到合适位置（比如开头注释行或单独数据行）。

示例代码：

Highcharts.stockChart('container', {
  exporting: {
    csv: {
      formatter: function (options) {
        // 获取第一个Y轴的最值（多轴场景可调整axis索引）
        const yAxis = this.yAxis[0];
        const yMin = yAxis.min;
        const yMax = yAxis.max;

        // 获取默认生成的CSV内容
        const defaultCSV = options.defaultFormatter(options);

        // 方式1：在CSV开头添加注释行
        const customCSV = `# Y轴最小值: ${yMin}, Y轴最大值: ${yMax}\n${defaultCSV}`;

        // 方式2：添加为单独数据行（适合作为数据展示）
        // const customCSV = `${defaultCSV}\nY轴最值,${yMin},${yMax}`;

        return customCSV;
      }
    }
  },
  // 其他图表配置
  series: [{
    data: [/* 你的业务数据 */]
  }]
});

方法二：自定义导出菜单按钮（灵活控制导出内容） #

如果需要单独提供带最值的CSV导出选项，可自定义导出菜单按钮，点击时生成对应内容并下载：

示例代码：

Highcharts.stockChart('container', {
  exporting: {
    buttons: {
      contextButton: {
        menuItems: [
          // 保留默认导出选项
          'downloadPNG',
          'downloadJPEG',
          'downloadPDF',
          'downloadSVG',
          'separator',
          // 自定义CSV导出项
          {
            text: '导出带Y轴最值的CSV',
            onclick: function () {
              const chart = this.chart;
              const yAxis = chart.yAxis[0];
              const yMin = yAxis.min;
              const yMax = yAxis.max;

              // 获取默认CSV数据行并拆分
              const csvRows = chart.getCSV().split('\n');
              // 在开头插入最值注释行
              csvRows.unshift(`# Y轴最小值: ${yMin}, Y轴最大值: ${yMax}`);
              // 或在结尾添加数据行：csvRows.push(`Y轴最值,${yMin},${yMax}`);

              const csvContent = csvRows.join('\n');
              // 创建下载链接并触发下载
              const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.setAttribute('download', 'chart-data-with-y-limits.csv');
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            }
          }
        ]
      }
    }
  },
  // 其他图表配置
  series: [{
    data: [/* 你的业务数据 */]
  }]
});

注意事项 #

• 多Y轴场景，需调整yAxis[0]的索引，比如yAxis[1]对应第二条Y轴，也可遍历所有Y轴分别获取最值。
• Y轴的min和max无论是自动计算还是手动设置，都可通过该属性直接获取。
• 注释行或数据行的格式可根据需求自定义，比如添加更清晰的表头标识。

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