如何在Google圖表中創建「短幣」軸格式？

Question

我有一個使用Google的Chart API的Column Chart，除了Y軸（vAxis）之外，一切都很棒。圖表本身處理的美元值可能從幾千到幾十億不等，這取決於數據視圖。 hAxis有一個美麗的'short'格式，可以讓Google Chart API爲您完成所有繁重的縮寫工作（5,000至5K，6000萬至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>