如何在C3图表中展示BRL格式的totalValorSolicitado数据？

问题本质 #

C3.js要求图表数据列中的值必须是数值类型，直接传入格式化后的字符串会被判定为无效数据，导致图表无法正常渲染——这是图表库的固有限制，不是操作错误。我们需要保留原始数值用于图表计算，再通过C3的格式化配置来实现货币格式的展示。

两种解决方案 #

方案1：复用后端返回的已格式化字符串

遍历数据时把后端返回的totalValorSolicitadoFormatado存入映射表，在图表的tooltip和刻度格式化时直接取用：

porAntecipacao: function () {
    var formData = tabDashboard.getFormData();
    // 存储每个分类对应的已格式化货币字符串
    var valorFormatadoMap = {};
    $.ajax({
        type: "POST",
        url: urlBase + '/TotalAntecipado',
        divLoading: '#graficoPizzaPorAntecipacaoBarra',
        cache: false,
        async: true,
        crossDomain: true,
        processData: false,
        contentType: false,
        xhrFields: {
            withCredentials: true
        },
        data: formData,
        success: resposta => {
            if (resposta.sucesso) {
                var valores = [];

                jQuery.each(resposta.dados.lista, function (name, value) {
                    valores.push([value.pickNome, value.totalValorSolicitado]);
                    // 填充映射表
                    valorFormatadoMap[value.pickNome] = value.totalValorSolicitadoFormatado;
                });

                var chart2 = c3.generate({
                    bindto: '#graficoPizzaPorAntecipacaoBarra',
                    data: {
                        columns: valores,
                        type: 'bar' 
                    },
                    bar: {
                        width: {
                            ratio: 1 
                        }
                    },
                    axis: {
                        x: {
                            type: 'category' 
                        },
                        y: {
                            tick: {
                                // y轴刻度用映射表或前端格式化，这里用前端格式化保证统一
                                format: function(d) {
                                    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(d);
                                }
                            }
                        }
                    },
                    tooltip: {
                        format: {
                            value: function (value, ratio, id) {
                                // 优先用后端返回的格式化字符串， fallback到前端格式化
                                return valorFormatadoMap[id] || new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
                            }
                        }
                    }
                });
            }
        },
    });
},

方案2：前端自行格式化（无需依赖后端字符串）

如果想统一控制格式或后端返回的字符串有问题，直接用JS原生的Intl.NumberFormat处理BRL格式：

// 只需要修改图表配置部分
var chart2 = c3.generate({
    bindto: '#graficoPizzaPorAntecipacaoBarra',
    data: {
        columns: valores,
        type: 'bar' 
    },
    bar: {
        width: {
            ratio: 1 
        }
    },
    axis: {
        x: {
            type: 'category' 
        },
        y: {
            tick: {
                format: function(d) {
                    return new Intl.NumberFormat('pt-BR', { 
                        style: 'currency', 
                        currency: 'BRL',
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }).format(d);
                }
            }
        }
    },
    tooltip: {
        format: {
            value: function (value) {
                return new Intl.NumberFormat('pt-BR', { 
                    style: 'currency', 
                    currency: 'BRL',
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(value);
            }
        }
    }
});

关键总结 #

• 始终用totalValorSolicitado（数值类型）作为图表的原始数据，保证图表能正常计算布局、刻度等。
• 显示格式完全通过C3的tooltip.format.value和axis.y.tick.format配置实现，不需要修改原始数据类型。

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