Highcharts图表千分位逗号显示正常，导出XLS后消失如何解决？

问题说明 #

使用Highcharts生成的图表中，通过lang.thousandsSep设置的千分位逗号显示正常，但通过图表导出菜单下载为XLS文件后，数据中的千分位逗号消失，需要让导出的XLS数据也保持一致的千分位格式。

解决方案 #

Highcharts默认导出的是原始数值数据而非格式化后的文本，要实现导出保留千分位逗号，需要自定义导出数据的格式化逻辑，利用Highcharts内置的numberFormat方法对数值进行格式化，并通过exporting.csv.dataFormatter配置覆盖默认的数据导出行为。

修改后的代码示例 #

HTML #

<script src='https://code.highcharts.com/highcharts.js'></script>
<script src='https://code.highcharts.com/modules/exporting.js'></script>
<script src='https://code.highcharts.com/modules/export-data.js'></script>

<div id='container'></div>

JavaScript #

let options = {
  series: [{
    data: [1021, 1210, 933, 804, 904, 1004]
  }],
  exporting: {
    csv: {
      // 自定义数据格式化函数，将数值转为带千分位的字符串
      dataFormatter: function(value) {
        if (typeof value === 'number') {
          return Highcharts.numberFormat(value, 0, '.', ',');
        }
        return value;
      }
    }
  }
}

Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  }
});

Highcharts.chart('container', options);

代码说明 #

1. Highcharts.setOptions中设置lang.thousandsSep: ','，保证图表前端显示的千分位格式正确。
2. 在exporting.csv中配置dataFormatter函数：判断值为数字时，调用Highcharts.numberFormat将其格式化为带千分位逗号的字符串（参数依次为：目标数值、小数位数、小数分隔符、千分位分隔符）。
3. 配置后导出的XLS文件中，数据会以带千分位逗号的文本形式存在，与图表显示的格式完全一致。

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