如何在Highcharts导出的XLS文件中显示百分比值

需求说明 #

• 现有带百分比的堆叠条形图，导出XLS后仅显示原始数值，目标是新增百分比列（优先方案）或在数值旁附带百分比
• 当前导出效果：
• 预期效果：

已尝试的无效代码 #

方案1：读取自定义百分比数据 #

csv: {
  itemFormatter: function(item) {
    if (item && item.custom && item.custom.percentage) {
      return item.y + ' (' + item.custom.percentage + ')';
    }
    return item.y;
  }
}

方案2：单系列内计算百分比 #

exporting: {
    csv: {
        itemFormatter: function(item) {
            const total = item.series.data.reduce((sum, point) => sum + point.y, 0);
            const percentage = (item.y / total * 100).toFixed(2);
            return `${item.series.name},${item.x},${item.y},${percentage}%`;
        }
    }
}

可行解决方案 #

要实现导出时新增百分比列，需结合columnHeaderFormatter和itemFormatter，核心是基于同一x轴分类下的所有系列总和计算百分比（而非单个系列总和），这是之前方案失效的关键。

完整配置代码 #

exporting: {
    csv: {
        // 自定义列头，为每个数值列添加对应百分比列
        columnHeaderFormatter: function(item, key, columnIndex) {
            if (key === 'y') {
                return [item.series.name, `${item.series.name} (%)`];
            }
            return item;
        },
        // 处理数据项，输出数值和对应百分比
        itemFormatter: function(item) {
            if (item.y !== undefined) {
                // 获取当前x分类下的所有数据点
                const categoryPoints = item.series.chart.series.flatMap(series => 
                    series.data.filter(point => point.x === item.x)
                );
                // 计算当前分类的总数值
                const total = categoryPoints.reduce((sum, point) => sum + point.y, 0);
                // 计算百分比，处理总和为0的情况
                const percentage = total > 0 ? ((item.y / total) * 100).toFixed(2) + '%' : '0%';
                
                // 返回数值和百分比，对应两列
                return [item.y, percentage];
            }
            return item;
        },
        // 确保CSV列分隔符正确
        itemDelimiter: ','
    }
}

代码说明 #

1. columnHeaderFormatter：为每个系列的数值列后追加百分比列头，例如“系列A”对应新增“系列A (%)”列
2. itemFormatter：
   • 定位当前数据点所属的x轴分类，收集该分类下所有系列的数据点
   • 计算该分类的总数值，以此为基数计算当前数据点的占比
   • 返回数组格式的数值和百分比，对应导出后的两列
3. itemDelimiter：设置为逗号保证CSV格式规范，导出为XLS时能正确识别列结构

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