You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Highcharts饼图负数值downloadXLS/viewData导出显示异常求助

解决Highcharts饼图导出Excel/查看数据时负数显示为正数的问题

你可以通过自定义导出数据的格式化函数,让标记为negative的数据点在导出Excel和查看数据时显示为负数。核心是利用exporting.csv.formatter(同时作用于downloadXLS和viewData功能)来处理每个数据点的数值:

修改后的完整代码

Highcharts.chart('container', {
    chart: {
        type: 'pie',
    },
    title: {
        text: 'Chart'
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormatter: function () {
            if (this.y === null) {
                return this.name + ': 0%';
            } else {
                return this.name + ': ' + (this.negative ? '-' + this.y : this.y) + '%';
            }
        },
        useHTML: true
    },
    legend: {
        itemStyle: {
            fontSize: '11px',
        },
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)',
        labelFormatter: function () {
            if (this.y === null) {
                return this.name + ': 0%';
            } else {
                return this.name + ': ' + (this.negative ? '-' + this.y : this.y) + '%';
            }
        },
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            showInLegend: true,
            dataLabels: {
                formatter() {
                    let value = this.point.negative ? -this.y : this.y;
                    return '<b>' + this.point.name + '</b>: ' + value + ' %';
                }
            }
        },
        series: {
            cursor: 'pointer'
        }
    },
    series: [{
        name: 'Value',
        data: [{
            name: 'A',
            y: 106.733600
        }, {
            name: 'B',
            y: 0.725800
        }, {
            name: 'C',
            y: 0.000000
        }, {
            name: 'D',
            y: 7.530000,
            negative: true
        }, {
            name: 'E',
            y: 0.070500
        }]
    }],
    exporting: {
        sourceHeight: 800,
        sourceWidth: 800,
        scale: 1,
        buttons: {
            contextButton: {
                menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadXLS','viewData']
            }
        },
        // 自定义导出数据的格式化逻辑
        csv: {
            formatter: function (series) {
                let rows = [];
                // 添加表头
                rows.push([series.name, 'Value']);
                // 处理每个数据点
                series.data.forEach(point => {
                    let value = point.options.negative ? -point.y : point.y;
                    rows.push([point.name, value]);
                });
                return rows;
            }
        }
    }
});
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.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>

核心逻辑说明

  • 在exporting.csv.formatter中,遍历每个数据点,检查是否带有negative自定义属性,若存在则将y值取反,否则保留原数值。
  • 该格式化函数会同时作用于downloadXLS导出和viewData查看功能,确保两处的数据都显示正确的正负值。

内容的提问来源于stack exchange,提问作者Fikfattt

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.09 04:40:23