api - 如何在 Google API Linechart 中格式化数字？

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)

十进制符号

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

小数位数

一个数字，指定要在小数点后显示的位数。这
默认为 2。如果您指定的位数多于数字包含的位数，则
将为较小的值显示零。截断的值将是
四舍五入(5 舍入)。

分组符号

用于将数字分组到小数点左侧的字符
成三套。默认为逗号 (,)。

负色

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

否定 parent

一个 bool 值，其中 true 表示负值应该是
被括号包围。默认为真。

图案

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

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

字首

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

后缀

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

ICU 十进制格式引用

您可能已经从上面的 Google NumberFormat 文档中注意到，您可以从 ICU DecimalFormat Reference 中找到有关格式化数字的更多详细信息。以下是来自 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。