10

我正在使用谷歌图表工具（https://developers.google.com/chart/）来显示数据，有时我的值非常高（100.000+）。

我的图表尺寸非常小，100.000 不适合，但 100k 可以。如果值高于 10k，有没有办法可以配置 vAxis 以在“K”中显示 vAxis 上的数字？

4

4 回答 4

21

简要地，

options['vAxis']['format'] = 'short';
于 2015-10-06T07:50:35.063 回答
11

Google Visualization 使用ICU 十进制格式的子集，可以使用DataView或 设置vAxis.format。

不幸的是，该子集不包括除以 1,000 的能力。因此，您需要先操作数据。假设这是您的数据：

  var data = google.visualization.arrayToDataTable([
    ['x', 'Data'],
    ['A', 123456],
    ['B', 234567],
    ['C', 456789],
    ['D', 890123],
    ['E', 789012],
    ['F', 789012],
    ['G', 890123],
    ['H', 456789],
    ['I', 234567],
    ['J', 345678],
    ['K', 345678],
    ['L', 345678],
    ['M', 123456],
    ['N', 123456]
  ]);

我们需要克隆数据，然后将每个点除以 1,000。这是一个简单的方法：

  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
  }

然后我们可以将其绘制成图表并将格式设置为：vAxis: {format: "#,###k"}-- 但是有一个问题。现在，当您将鼠标悬停在系列上时，您会注意到 890,123 显示为 890.123！这不好，所以我们需要通过在循环中添加另一行来解决这个问题：

  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
    formattedData.setFormattedValue(i, 1, dataPoint.toString());
  }

这将使数据看起来像 890123，但绘制为 890.123，因此轴看起来不错。如果你想添加逗号，有这样的资源，如果你愿意，你可以使用。我不会假设知道您的数据格式，因此如果您想要千位分隔符、小数点或鼠标悬停在图表上的其他任何内容，我会让您自己计算出该部分。

这是最终的工作代码：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Data'],
    ['A', 123456],
    ['B', 234567],
    ['C', 456789],
    ['D', 890123],
    ['E', 789012],
    ['F', 789012],
    ['G', 890123],
    ['H', 456789],
    ['I', 234567],
    ['J', 345678],
    ['K', 345678],
    ['L', 345678],
    ['M', 123456],
    ['N', 123456]
  ]);

  // Clone data and divide by 1,000 in column 1
  var formattedData = data.clone();
  for (var i = 0; i < formattedData.getNumberOfRows(); i++) {
    var dataPoint = formattedData.getValue(i, 1);
    formattedData.setValue(i, 1, dataPoint / 1000);
    formattedData.setFormattedValue(i, 1, dataPoint.toString());
  }

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(formattedData, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {format: "#,###k"}}
          );
}
于 2013-03-07T00:07:56.637 回答
5

Number Formats，您可以使用 hAxis.format 和 vAxis.format 控制标签编号的格式。

例如，{hAxis: { format:'#,###%'} } 显示值 10、7.5 和 0.5 的值“1,000%”、“750%”和“50%”。您还可以提供以下任何预设：

{format: 'none'}: displays numbers with no formatting (e.g., 8000000)
{format: 'decimal'}: displays numbers with thousands separators (e.g., 8,000,000)
{format: 'scientific'}: displays numbers in scientific notation (e.g., 8e6)
{format: 'currency'}: displays numbers in the local currency (e.g., $8,000,000.00)
{format: 'percent'}: displays numbers as percentages (e.g., 800,000,000%)
{format: 'short'}: displays abbreviated numbers (e.g., 8M)
{format: 'long'}: displays numbers as full words (e.g., 8 million)
于 2017-02-01T06:44:42.293 回答
1

尝试将displayExactValues配置选项设置为true：

是否在图表顶部显示缩短的、舍入的值，以节省空间；false 表示可能。例如，如果设置为 false，56123.45 可能会显示为 56.12k。

这应该给你你想要的行为，虽然它没有给你明确的能力来设置你希望它开始使用'k'后缀的值。

于 2013-03-06T07:47:53.333 回答