如何在 Google API Linechart 中格式化数字? [英] How to format numbers in Google API Linechart?

问题描述

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

I need to format the numbers in the axis and the numbers that appear when you hover your mouse over the line chart.

推荐答案

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

There are two steps involved. The first step is to find out what pattern you should use; the second step is to put the pattern in the proper place in your code. To make this post more beautiful, I show you step 2 and then step 1.

代码如下:

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'} 格式化垂直轴上的标签.

vAxis: {title: 'Time', format:'0.0E00'} formats the labels on the vertical axis.

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

This formats the numbers you see when you hover over points on the line chart:

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

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

Note how (dataTable,0) formats the hAxis information while (dataTable,1) formats the vAxis information (again, which you see when you hover over the points on the line chart).

最后两行代码:

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

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

are for you two compare with your own chart. Replace fchartvar,dataTable and fchart by the names used in your code. If you're using something other than line chart, replace LineChart with the chart you're using.

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

An example of 0.0E00 is turning 1,234 into 1.2E03.

NumberFormat 支持传递给构造函数的以下选项:(来源:GoogleNumberFormat 文档)

NumberFormat supports the following options, passed in to the constructor: (source: Google NumberFormat documentation)

十进制符号

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

小数位数

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

分组符号

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

负色

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

negativeParens

negativeParens

• 一个布尔值，其中 true 表示负值应该是被括号包围.默认值为 true.

模式

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

• A format string. When provided, all other options are ignored, except negativeColor.

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

The format string is a subset of the ICU pattern set. For instance, {pattern:'#,###%'} will result in output values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.

前缀

• 值的字符串前缀，例如$".

后缀

• 值的字符串后缀，例如%".

您可能已经从上面的 Google NumberFormat 文档中注意到，您可以从 ICU DecimalFormat Reference 中找到有关格式化数字的更多详细信息.以下是 ICU DecimalFormat 参考(位于网页的中间"):

As you might have noticed from the Google NumberFormat documentation above, you can find out more detailed information about formatting the numbers from the ICU DecimalFormat Reference. Here is some of the most important information from the ICU DecimalFormat Reference (it's in the 'middle' of the webpage):

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

A DecimalFormat pattern contains a postive and negative subpattern, for example, "#,##0.00;(#,##0.00)". Each subpattern has a prefix, a numeric part, and a suffix. If there is no explicit negative subpattern, the negative subpattern is the localized minus sign prefixed to the positive subpattern. That is, "0.00" alone is equivalent to "0.00;-0.00". If there is an explicit negative subpattern, it serves only to specify the negative prefix and suffix; the number of digits, minimal digits, and other characteristics are ignored in the negative subpattern. That means that "#,##0.0#;(#)" has precisely the same result as "#,##0.0#;(#,##0.0#)".

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

The prefixes, suffixes, and various symbols used for infinity, digits, thousands separators, decimal separators, etc. may be set to arbitrary values, and they will appear properly during formatting. However, care must be taken that the symbols and strings do not conflict, or parsing will be unreliable. For example, either the positive and negative prefixes or the suffixes must be distinct for parse() to be able to distinguish positive from negative values. Another example is that the decimal separator and thousands separator should be distinct characters, or parsing will be impossible.

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

The grouping separator is a character that separates clusters of integer digits to make large numbers more legible. It commonly used for thousands, but in some locales it separates ten-thousands. The grouping size is the number of digits between the grouping separators, such as 3 for "100,000,000" or 4 for "1 0000 0000". There are actually two different grouping sizes: One used for the least significant integer digits, the primary grouping size, and one used for all others, the secondary grouping size. In most locales these are the same, but sometimes they are different. For example, if the primary grouping interval is 3, and the secondary is 2, then this corresponds to the pattern "#,##,##0", and the number 123456789 is formatted as "12,34,56,789". If a pattern contains multiple grouping separators, the interval between the last one and the end of the integer defines the primary grouping size, and the interval between the last two defines the secondary grouping size. All others are ignored, so "#,##,###,####" == "###,###,####" == "##,#,###,####".

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

Illegal patterns, such as "#.#.#" or "#.###,###", will cause DecimalFormat to set a failing UErrorCode.

这篇关于如何在 Google API Linechart 中格式化数字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！