如何在AnyChart中为大额数值添加千位分隔符

1. 修复数据类型（核心问题） #

你之前给数据添加带分隔符的字符串导致图表消失，本质是AnyChart需要数值类型数据才能正常渲染，带分隔符的字符串会被判定为无效数值，直接导致图表解析失败。

修改生成smartMoney数组的代码，去掉数值的引号并转为数字：

{%for y in smart_money%}           
currentDate = new Date("{{y.dateY}}")
formatDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1).toISOString().slice(0, 10)
// 去掉引号，用Number()转为数值类型
smartMoney.push([formatDate, Number("{{y.value|floatformat:0}}")])    
{%endfor%}

2. 配置千位分隔符格式 #

替换你现有标签格式化代码，不需要启用scale（该参数用于显示K/M等缩放单位），直接开启千位分隔：

方式一：简洁的格式化字符串 #

var labels = smartM.labels();
labels.format("{%value}{groupsSeparator:','}");

方式二：配置对象（更灵活） #

var labels = smartM.labels();
labels.format(function() {
    return anychart.format.number(this.value, {
        useGrouping: true, // 开启千位分隔
        decimalCount: 0 // 保留0位小数，匹配后端floatformat:0的设置
    });
});

3. 可选：给Y轴刻度添加千位分隔 #

如果需要Y轴的刻度值也显示千位分隔，补充以下代码：

smartMoneyPlot.yAxis().labels().format("{%value}{groupsSeparator:','}");

关键修改后的代码片段 #

// 生成smartMoney数组时确保数值类型
{%for y in smart_money%}           
currentDate = new Date("{{y.dateY}}")
formatDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1).toISOString().slice(0, 10)
smartMoney.push([formatDate, Number("{{y.value|floatformat:0}}")])    
{%endfor%}

// ...其他代码...

smartM = smartMoneyPlot.column(smartMoney).name('Y')
// 设置标签千位分隔
var labels = smartM.labels();
labels.format("{%value}{groupsSeparator:','}");
// 可选：设置Y轴刻度千位分隔
smartMoneyPlot.yAxis().labels().format("{%value}{groupsSeparator:','}");

修改完成后，图表会正常渲染，数值将显示为8,733,787的格式。

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