7

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

4

2 回答 2

33

涉及两个步骤。第一步是找出你应该使用什么模式；第二步是将模式放在代码中的适当位置。为了使这篇文章更漂亮，我向您展示第 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)在格式化 vAxis 信息时如何格式化(dataTable,1)hAxis 信息（同样，当您将鼠标悬停在折线图上的点上时会看到）。

最后两行代码：

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 文档）

十进制符号

  • 用作小数点标记的字符。默认值为点 (.)。

分数位数

  • 一个数字，指定要在小数点后显示多少位。默认值为 2。如果您指定的数字多于数字所包含的数字，它将为较小的值显示零。截断的值将四舍五入（向上舍入 5）。

分组符号

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

负色

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

负括号

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

图案

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

    格式字符串是ICU 模式集的子集。例如，{pattern:'#,###%'} 将产生值 10、7.5 和 0.5 的输出值“1,000%”、“750%”和“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() 才能区分正值和负值。另一个例子是小数分隔符和千位分隔符应该是不同的字符，否则将无法解析。

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

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

于 2013-08-13T08:54:00.747 回答
3

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

例如：

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

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

于 2016-10-19T11:11:40.500 回答