Question

[编辑：问题已解决，请参阅最后的解决方案，其中显示了实现WhiteHat可接受的有效答案的代码。我在这里留下了原始示例无效代码，因为它确实实现了两种不同的公认解决方案，在这种情况下不起作用。我希望之前和之后的示例将对可能迷失这条路的其他人有用]

我无法让Google图表的NumberFormat（）插入逗号以按数千分组和/或添加货币符号。我在垂直轴上使用的相同格式设置模式可以正常工作。

我尝试了两种公认的解决方案（here)和 (here)，没有运气。公认的第一种解决方案使用数字格式化程序中的模式，第二种使用分组符号。

以下是我的图表外观的快照（添加绿色和红色标记来说明问题）：

奇怪的是，我可以正确地使用模式来设置垂直轴的格式（请参见绿色的对号），但是同样的事情也不适用于数字格式器（红色的对号）。

这是我用于numberformatter的代码，据我了解，应该在图表主体中给我逗号分隔的值：

        var formatter = new GoogleCharts.api.visualization.NumberFormat({
        negativeColor: 'red',
        negativeParens: true,
        pattern: currencySymbol + '###,###',
        });

    formatter.format(data, 1);

currencySymbol只是一个字符串变量，在这里是墨西哥比索的符号。如果是引起问题的，我确实尝试将其删除并仅使用以下格式：

        var formatter = new GoogleCharts.api.visualization.NumberFormat({
        negativeColor: 'red',
        negativeParens: true,
        pattern:'###,###',
        });

    formatter.format(data, 1);

结果相同，但图表的正文中没有逗号。

令人困惑的是，如果您查看我的垂直轴格式，则在图表选项中指定的完全相同的模式将为我提供所需的垂直轴结果。

            vAxis: {
           format: currencySymbol + '###,###',
            maxValue: 350,   
        },

如前所述，我还尝试了另一种公认的堆栈溢出答案，在该答案中，我指定了这样的分组符号，但它也不起作用：

        var formatter = new GoogleCharts.api.visualization.NumberFormat({
        negativeColor: 'red',
        negativeParens: true,
        prefix: currencySymbol,
        groupingSymbol: ',',
        });

    formatter.format(data, 1);

[编辑：怀特·哈特（WhiteHat）以他接受的答案解决了这个问题。以下是工作代码。为了希望对社区有所帮助，我在上面放置了无法正常工作的示例代码，因为其他代码可能沿着相同的路径（该路径是某些已接受的StackOverflow接受的答案，在这种情况下不起作用）] < / p>

这是我重构的代码，用于构建数据和注释：

            let dataToBind = [['Year', 'Revenue', { role: 'style' }, { role: 'annotation' }]];

        let currencySymbol: string = convertCurrencyToSymbol(this.data.currencyCode);

        var formatter = new GoogleCharts.api.visualization.NumberFormat({
            negativeColor: 'red',
            negativeParens: true,
            pattern: currencySymbol + '###,###',
        });

        let mappedData: any = this.data.chartData.map(d => [d.year, d.revenue, `opacity: 0.5; fill-color:${this.getNextColor()}`, `${**formatter.formatValue(d.revenue)**}`]);  

        dataToBind.push(...mappedData);

        let data = GoogleCharts.api.visualization.arrayToDataTable(dataToBind);

正如WhiteHat指出的那样，在EACH批注上应用formatter.formatValue（）是解决此问题的方法。如前所述，currencySymbol变量只是我从本地函数加载的简单字符串变量，因此我可以获取比索，欧元等的正确值。

这是应用此更改后我的图表的外观。这是理想的效果，用逗号和货币符号表示：

Answer 1

格式化程序有两种方法...

format将格式化数据表列
formatValue将格式化单个值

在加载数据时尝试使用formatValue。

formatter.formatValue(d.revenue)

例如

let mappedData: any = this.data.chartData.map(d => [d.year, d.revenue, `opacity: 0.5; fill-color:${this.getNextColor()}`, formatter.formatValue(d.revenue)]);  // ${currencySymbol}

Google图表：无法用逗号格式化数字数据

1 个答案: