如何在 Google Charts 中创建“短货币”轴格式？

Question

我有一个使用 Google 图表 API 的Column Chart，除了 Y 轴 (vAxis) 之外，其他一切都很好。图表本身处理的美元价值可能从几千到数十亿不等，具体取决于数据视图。 hAxis 有一个漂亮的 'short' 格式，它可以让 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>