Laravel中Highcharts导出数据表千位格式化问题求助

要让export-data生成的数据表显示千位分隔的销售数值，需要手动配置导出数据的格式化规则——因为export-data默认会直接使用原始数据值，不会自动继承图表中的格式化设置。

方案1：针对单个Series配置格式化 #

在Series配置中添加dataExport.formatter，对每个数据点的数值进行千位分隔格式化：

series: [{
    name: 'Ventas',
    data: venta,
    dataExport: {
        formatter: function(point) {
            // 用Highcharts自带的numberFormat处理千位分隔，保留0位小数并加$符号
            return '$' + Highcharts.numberFormat(point.y, 0);
        }
    }
}]

方案2：全局导出配置格式化 #

如果需要统一处理所有导出数据的格式，可以在exporting配置中添加CSV格式化函数，遍历并修改数值列：

exporting: {
    tableCaption: "Tabla de Ventas Mensuales",
    csv: {
        formatter: function(options) {
            const rows = options.rows;
            // 从第二行开始（第一行是表头），格式化第二列的销售数值
            for (let i = 1; i < rows.length; i++) {
                rows[i][1] = '$' + Highcharts.numberFormat(parseFloat(rows[i][1]), 0);
            }
            return rows;
        }
    }
}

修改后的完整代码 #

<div class="">
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
        var anio = {!! json_encode($anio) !!};
        var mes = {!! json_encode($mes) !!}; // ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
        var venta = {!! json_encode($venta) !!}; // ['1356940858.000000', '1945419126.000000', '934706589.000000', '1803607453.000000', '78415027.000000']

        venta = venta.map(function(value) {
            return parseFloat(value);
        });

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

        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Ventas Mensuales',
                align: 'left',
                style: {
                    fontSize: '16px'
                }
            },
            xAxis: {
                categories: mes,
                crosshair: true,
                accessibility: {
                    description: 'Meses'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Ventas Mensuales'
                },
                labels: {
                    format: '{value:,.0f}'
                }
            },
            tooltip: {
                valueSuffix: ' (COP)'
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            return '$' + Highcharts.numberFormat(this.y, 0);
                        }
                    }
                }
            },
            series: [{
                name: 'Ventas',
                data: venta,
                // 添加Series级别的导出格式化
                dataExport: {
                    formatter: function(point) {
                        return '$' + Highcharts.numberFormat(point.y, 0);
                    }
                }
            }],
            exporting: {
                tableCaption: "Tabla de Ventas Mensuales"
                // 如果用全局格式化，取消下面注释并移除上面的series.dataExport
                /*
                csv: {
                    formatter: function(options) {
                        const rows = options.rows;
                        for (let i = 1; i < rows.length; i++) {
                            rows[i][1] = '$' + Highcharts.numberFormat(parseFloat(rows[i][1]), 0);
                        }
                        return rows;
                    }
                }
                */
            }
        });
</script>

说明：两种方案任选其一即可，Highcharts.numberFormat会自动使用你之前设置的thousandsSep: ','来处理千位分隔，确保图表和导出数据表的格式一致。

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