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

您可以使用$和'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>

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

1 个答案: