如何更改Google圖表中顯示的號碼格式？

Question

我繪製如下圖代碼：

有沒有什麼辦法讓我可以在堆棧中的數字格式更改爲上百萬的那些貨幣。在繪製圖表時，軸已使用選項內的「format：short」標籤格式化爲數百萬。

我基本上有一個JavaScript函數返回具有使用我繪製圖表的值的JSON。 JavaScript函數給出如下：

<script> 
google.load('visualization', '1', {packages: ['corechart', 'bar', 'table']}); 
google.setOnLoadCallback(loadcharts); 
var dept= 'General Ward'; 

function drawBasic() { 



var abc = $.ajax({url:'kpi23.php?dept='+dept,async:false,dataType:"json",}).responseText; 
    var data = new google.visualization.DataTable(abc); 
    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 
        { //calc: "stringify", 
        sourceColumn: 1, 
        type: "number", 
        role: "annotation" },2, 
        { //calc: "stringify", 
        sourceColumn: 2, 
        type: "number", 
        role: "annotation" },3, 
        { //calc: "stringify", 
        sourceColumn: 3, 
        type: "number", 
        role: "annotation" },4, 
        {// calc: "stringify", 
        sourceColumn: 4, 
        type: "number", 
        role: "annotation" },5, 
        { //calc: "stringify", 
        sourceColumn: 5, 
        type: "number", 
        role: "annotation" }, 
        { //calc: "stringify", 
        sourceColumn: 6, 
        type: "number", 
        role: "annotation" }]); 
    var options = { 
    chart: { 
     title: 'Footfall by Day of Week' 
     }, 
     annotations: { 
        textStyle: { 
        fontSize: 10, 
        //opacity: 0.8   // The transparency of the text. 
       } 
       }, 
    //width: 1200, 
    height: 400, 
    //hAxis : {textStyle : {fontSize: 9}}, 
    series: { 
     0:{color:'#083874'}, 
     1:{color:'#94CAFC'}, 
     2:{color:'#EBBA25'}, 
     3:{color:'#F59E47'}, 
     4:{color:'#9A9FA2'}, 

     }, 
     vAxis: {title: "Revenue",titleTextStyle: {italic: false},gridlines: { color: 'transparent'},viewWindowMode: "explicit", viewWindow:{ min: 0 }, format: 'short'}, 
     hAxis: {title: "Month",titleTextStyle: {italic: false},gridlines: { color: 'transparent'} }, 
     //chartArea: {left:90, width: 1000}, 
    //chartArea: {'width': '90%', 'height': '80%'}, 
    legend: { position: 'top', maxLines: 3 }, 
    bar: { groupWidth: '70%' }, 
    isStacked: true, 
    }; 

    var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')); 

    chart.draw(view, options); 
} 

Answer 1

您可以使用Number Formatter
見下面的例子...

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable({ 
 
    "cols":[ 
 
     {"label":"Month","type":"string"}, 
 
     {"label":"Day Care","type":"number"}, 
 
     {"label":"Semi Private","type":"number"}, 
 
     {"label":"General Ward","type":"number"}, 
 
     {"label":"ICU","type":"number"}, 
 
     {"label":"Private","type":"number"}, 
 
     {"label":"Suite","type":"number"} 
 
    ], 
 
    "rows":[ 
 
     {"c":[{"v":"FEB"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}, 
 
     {"c":[{"v":"JAN"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}, 
 
     {"c":[{"v":"DEC"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}, 
 
     {"c":[{"v":"NOV"},{"v":29023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]} 
 
    ] 
 
    }); 
 

 
    var formatter = new google.visualization.NumberFormat({ 
 
    pattern: 'short' 
 
    }); 
 
    formatter.format(data, 1); 
 
    formatter.format(data, 2); 
 
    formatter.format(data, 3); 
 
    formatter.format(data, 4); 
 
    formatter.format(data, 5); 
 
    formatter.format(data, 6); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 
 
    1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 
 
    2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}, 
 
    3, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}, 
 
    4, {calc: "stringify", sourceColumn: 4, type: "string", role: "annotation"}, 
 
    5, {calc: "stringify", sourceColumn: 5, type: "string", role: "annotation"}, 
 
    6, {calc: "stringify", sourceColumn: 6, type: "string", role: "annotation"} 
 
    ]); 
 

 
    var options = { 
 
    chart: { 
 
     title: 'Footfall by Day of Week' 
 
    }, 
 
    annotations: { 
 
     textStyle: { 
 
     fontSize: 10 
 
     } 
 
    }, 
 
    height: 400, 
 
    series: { 
 
     0:{color:'#083874'}, 
 
     1:{color:'#94CAFC'}, 
 
     2:{color:'#EBBA25'}, 
 
     3:{color:'#F59E47'}, 
 
     4:{color:'#9A9FA2'} 
 
    }, 
 
    vAxis: {title: "Revenue", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}, viewWindowMode: "explicit", viewWindow: {min: 0}, format: 'short'}, 
 
    hAxis: {title: "Month", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}}, 
 
    legend: {position: 'top', maxLines: 3}, 
 
    bar: {groupWidth: '70%'}, 
 
    isStacked: true 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); 
 
    chart.draw(view, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>