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
相关产品推荐
相关产品推荐

