charts - 如何在 Google Charts 中创建 "short currency"轴格式？

Question

我有一个 Column Chart使用 Google 的图表 API，除了 Y 轴 (vAxis) 之外，一切都很好。图表本身处理的美元值(value)从几千到数十亿不等，具体取决于数据 View 。 hAxis 具有漂亮的“短” 格式，可让 Google Chart API 为您完成所有繁重的缩写工作(5,000 到 5K、60,000,000 到 6M 等) ，但我们想在值前加上美元符号。我知道还有一个内置的 'currency' 格式，您可以提供自己的自定义格式，但我找不到一种方法来使这些格式中的任何一个表现得像 'short ' 确实如此。

...

// set chart options
var options = {
    chartArea: { top: 70, left: 75, width: 675, height: 300 },
    isStacked: true,
    vAxis: { format: 'short', gridlines: {count: 6}, textStyle: {fontSize: 12} },
    hAxis: { textStyle: {fontSize: 12} },
    legend: { position: 'top', maxLines: 3 }
};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart($('colchart'));
chart.draw(data, options);
...

这似乎是一种应该非常非常普遍的东西，并且可能已经内置到库中了。我希望我只是想念它。除了手动滚动自定义解决方案之外，还有什么方法可以做到这一点吗？

Answer 1

您可以在 data 中为数字添加前缀 $ 以及 'short'。
找不到使用标准选项格式化轴的方法，但正如您所提到的，您可以使用 'ready' 事件自行滚动。

改编自前面的示例...

google.charts.load('44', {
  callback: drawChart,
  packages: ['line', 'corechart']
});

function drawChart() {
  // adapted from previous example
  var data1 = google.visualization.arrayToDataTable(
    [['id', 'C1'],[1,0.244543243223],[2,0.343454312334],[3,0.6543223411],[4,0.34231342342314],[5,0.454343343223],[6,0.5434221],[7,0.54324324314],[8,0.45324517],[9,0.543222321],[10,0.54325445519]]
  );
  var data2 = google.visualization.arrayToDataTable(
    [['id', 'C2'],[1,0.43654362],[2,0.46547543],[3,0.65475431],[4,0.65765454434],[5,0.6765443],[6,0.4654436],[7,0.3534657],[8,0.524343434],[9,0.453455532],[10,0.54354354358]]
  );
  var data3 = google.visualization.arrayToDataTable(
    [['id', 'C3'],[1,0.5345524],[2,0.6543453432],[3,0.53453465645614],[4,0.63245524],[5,0.543543536533], [6,0.53454355334],[7,0.242354531],[8,0.3424543523],[9,0.5436536544],[10,0.5425345332]]
  );
  for (var i = 0; i < data1.getNumberOfRows(); i++) {
    data1.setValue(i, 1, data1.getValue(i, 1) * 1000000);
  }
  for (var i = 0; i < data2.getNumberOfRows(); i++) {
    data2.setValue(i, 1, data2.getValue(i, 1) * 1000000);
  }
  for (var i = 0; i < data3.getNumberOfRows(); i++) {
    data3.setValue(i, 1, data3.getValue(i, 1) * 1000000);
  }

  var chartDiv = document.getElementById('chart');

  // format numbers in second column to 5 decimals
  var formatter = new google.visualization.NumberFormat({
    prefix: '$',
    pattern: 'short'
  });
  formatter.format(data1, 1);
  formatter.format(data2, 1);
  formatter.format(data3, 1);

  var options1 = {
    chartArea: { top: 70, left: 75, width: 675, height: 300 },
    height: 400,
    isStacked: true,
    vAxis: { format: 'short', gridlines: {count: 6}, textStyle: {fontSize: 12} },
    hAxis: { textStyle: {fontSize: 12} },
    legend: { position: 'top', maxLines: 3 }
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
  var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1,2], [1]);
  var chart1 = new google.visualization.ColumnChart(chartDiv);

  // use the 'ready' event to modify the chart once it has been drawn
  google.visualization.events.addListener(chart1, 'ready', function () {
    var axisLabels = chartDiv.getElementsByTagName('text');
    for (var i = 0; i < axisLabels.length; i++) {
      if (axisLabels[i].getAttribute('text-anchor') === 'end') {
        axisLabels[i].innerHTML = '$' + axisLabels[i].innerHTML;
      }
    }
  });

  chart1.draw(joinedData2, options1);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>