如何在Google API线条图中设置数字格式？

Question

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

Answer 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）

decimalSymbol

• 用作小数点标记的字符。默认值为点（。）。

fractionDigits

• 指定小数点后显示的位数的数字。该 默认值为2.如果指定的数字多于数字所包含的数字，则为 将为较小的值显示零。截断的值将是 圆形（5向上舍入）。

分组符号

• 用于将数字分组到小数点左侧的字符 成三件套。默认值为逗号（，）。

negativeColor

• 负值的文字颜色。没有默认值。价值观可以是 任何可接受的HTML颜色值，例如＆＃34; red＆＃34;或＆＃34;＃FF0000＆＃34;。

negativeParens

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

模式

• 格式字符串。提供时，除了以外的所有其他选项都将被忽略 negativeColor。

  格式字符串是ICU pattern set的子集。例如， {pattern：＆＃39;＃，###％＆＃39;}将产生输出值＆＃34; 1,000％＆＃34;，＆＃34; 750％＆＃34;和 ＆＃34; 50％＆＃34;对于值10,7.5和0.5。

前缀

• 值的字符串前缀，例如＆＃34; $＆＃34;。

后缀

• 值的字符串后缀，例如＆＃34;％＆＃34;。

ICU DecimalFormat参考

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

DecimalFormat模式包含正负子模式，例如＆＃34;＃，## 0.00;（＃，## 0.00）＆＃34;。每个子模式都有前缀，数字部分和后缀。如果没有明确的负子模式，则负子模式是前缀为子子模式的本地化减号。也就是说，＆＃34; 0.00＆＃34;单独相当于＆＃34; 0.00; -0.00＆＃34;。如果存在明确的否定子模式，则仅用于指定否定前缀和后缀;负子模式中忽略数字位数，最小数字和其他特征。这意味着＆＃34;＃，## 0.0＃;（＃）＆＃34;与＆＃34;＃，## 0.0＃;（＃，## 0.0＃）和＃34;的结果完全相同。

用于无穷大，数字，千位分隔符，小数分隔符等的前缀，后缀和各种符号可以设置为任意值，并且在格式化期间它们将正确显示。但是，必须注意符号和字符串不会发生冲突，否则解析将不可靠。例如，正负字母前缀或后缀必须是不同的，因为parse（）能够区分正值和负值。另一个例子是小数分隔符和千位分隔符应该是不同的字符，否则解析将是不可能的。

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

非法模式，例如＆＃34;＃。＃。＃＆＃34;或＆＃34;＃。###，###＆＃34;，将导致DecimalFormat设置失败的UErrorCode。

Answer 2

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

例如：

  

google.charts.load（'44'，{packages：['corechart'，'bar'，'sankey']，'language'：'fr'}）;

这就是我使用数字空间分隔符格式化所有数字的方式以及小数位数的逗号。