javascript - 如何更改 Google Chart 中显示的数字格式？

Question

我有一段代码可以绘制如下图表:

有什么方法可以将堆栈中的数字格式更改为百万，因为它们是货币。在绘制图表时，轴已使用选项中的“格式:短”标签格式化为百万。

我基本上有一个 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>