【问题标题】：How to format numbers in Google API Linechart?如何在 Google API Linechart 中格式化数字？
【发布时间】：2016-10-19 19:11:40
【问题描述】：

我需要格式化轴中的数字以及将鼠标悬停在折线图上时出现的数字。

【问题讨论】：

标签： api google-visualization

【解决方案1】：

涉及两个步骤。第一步是找出你应该使用什么模式；第二步是将模式放在代码中的适当位置。为了让这篇文章更漂亮，我向您展示了第 2 步和第 1 步。

第 2 步：将模式放入您的代码中

代码如下：

var options = {
        hAxis: {format:'###,###'}
        vAxis: {title: 'Time', format:'0.0E00'},
    };
    var formatter1 = new google.visualization.NumberFormat({pattern:'###,###'});
    formatter1.format(dataTable, 0);
    var formatter2 = new google.visualization.NumberFormat({pattern:'0.0E00'});
    formatter2.format(dataTable, 1);
    var fchartvar = new google.visualization.LineChart(document.getElementById('fchart'));
    fchartvar.draw(dataTable, options);

vAxis: {title: 'Time', format:'0.0E00'} 格式化垂直轴上的标签。

这会格式化您将鼠标悬停在折线图上的点上时看到的数字：

var formatter1 = new google.visualization.NumberFormat({pattern:'0.0E00'});
formatter1.format(dataTable, 1);

注意(dataTable,0) 如何格式化hAxis 信息，而(dataTable,1) 格式化vAxis 信息（同样，当您将鼠标悬停在折线图上的点上时会看到）。

最后两行代码：

var fchartvar = new google.visualization.LineChart(document.getElementById('fchart'));
fchartvar.draw(dataTable, options);

是为你们两个比较你自己的图表。将 fchartvar、dataTable 和 fchart 替换为代码中使用的名称。如果您使用的不是折线图，请将LineChart 替换为您正在使用的图表。

0.0E00 的一个例子是将1,234 变成1.2E03。

第 1 步：找到正确的模式

Google NumberFormat 文档

NumberFormat 支持以下选项，传入构造函数：（来源：Google NumberFormat documentation）

十进制符号

用作十进制标记的字符。默认为点 (.)。

分数位数

指定小数点后显示多少位数的数字。这默认为 2。如果您指定的位数多于数字包含的位数，则将为较小的值显示零。截断的值将是四舍五入（向上取整 5）。

分组符号

用于对小数点左侧的数字进行分组的字符分成三组。默认为逗号 (,)。

负色

负值的文本颜色。没有默认值。值可以是任何可接受的 HTML 颜色值，例如“red”或“#FF0000”。

负数

一个布尔值，其中 true 表示负值应该是用括号括起来。默认为 true。

模式

格式字符串。提供时，所有其他选项都将被忽略，除了负色。

格式字符串是ICU pattern set 的子集。例如， {pattern:'#,###%'} 将导致输出值“1,000%”、“750%”和值 10、7.5 和 0.5 为“50%”。

前缀

值的字符串前缀，例如“$”。

后缀

值的字符串后缀，例如“%”。

ICU 十进制格式参考

您可能已经从上面的 Google NumberFormat 文档中注意到，您可以从 ICU DecimalFormat 参考中找到有关格式化数字的更多详细信息。以下是来自ICU DecimalFormat Reference 的一些最重要的信息（位于网页的“中间”）：

DecimalFormat 模式包含正负子模式，例如“#,##0.00;(#,##0.00)”。每个子模式都有一个前缀、一个数字部分和一个后缀。如果没有明确的负子模式，则负子模式是正子模式前缀的局部减号。也就是说，单独的“0.00”等同于“0.00;-0.00”。如果有明确的否定子模式，它仅用于指定否定前缀和后缀；负子模式中忽略了位数、最小位数和其他特征。这意味着“#,##0.0#;(#)”的结果与“#,##0.0#;(#,##0.0#)”的结果完全相同。

用于无穷大、数字、千位分隔符、小数分隔符等的前缀、后缀和各种符号可以设置为任意值，在格式化时会正确显示。但是，必须注意符号和字符串不要冲突，否则解析将不可靠。例如，正负前缀或后缀必须是不同的， parse() 才能区分正负值。再比如小数分隔符和千位分隔符应该是不同的字符，否则无法解析。

分组分隔符是一个字符，用于分隔整数簇以使大数字更清晰。它通常用于数千，但在某些语言环境中它分隔一万。分组大小是分组分隔符之间的位数，例如“100,000,000”为 3，“1 0000 0000”为 4。实际上有两种不同的分组大小：一种用于最低有效整数位，即主要分组大小，另一种用于所有其他分组大小，即次要分组大小。在大多数语言环境中，它们是相同的，但有时它们是不同的。例如，如果主要分组间隔为 3，次要分组间隔为 2，则这对应于模式“#,##,##0”，数字 123456789 的格式为“12,34,56,789”。如果模式包含多个分组分隔符，则最后一个和整数末尾之间的间隔定义主要分组大小，最后两个之间的间隔定义辅助分组大小。所有其他都被忽略，所以 "#,##,###,####" == "###,###,####" == "##,#,###,# ###”。

非法模式，例如“#.#.#”或“#.###,###”，将导致 DecimalFormat 设置失败的 UErrorCode。

【讨论】：

【解决方案2】：

如果您需要根据国家/地区的区域设置简单地格式化图表中显示的所有数字，悬停和轴中，恕我直言，最简单的方法是在加载库时使用国家代码。

例如：

google.charts.load('44', {packages: ['corechart', 'bar', 'sankey'], 'language': 'fr'});

这就是我将使用空格分隔符格式化所有数字的方式，千位分隔符和小数位逗号。

【讨论】：