javascript - 如何删除谷歌图表底部的零

Question

我创建了以下图表:

我使用的javascript函数如下:

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

function drawBasic() {

    //alert(dept);

var abc = $.ajax({url:'kpi23.php?        dept='+dept,async:false,dataType:"json",}).responseText;
  var data = new google.visualization.DataTable(abc);


  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('chart_div'));

  chart.draw(view, options);
}

我看到 X 轴中出现了一些零，而 JSON 不包含任何 0。我怎样才能摆脱这些零？

Answer 1

下面是自定义计算列的示例，如果值也为 null，则该列将为注释返回 null。

这很丑陋，因为 calc: 没有传递 columnIndex。

更简洁的方法可能是将注释列添加到 Google DataTable，而不是使用 DataView...

google.charts.load("current", {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":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
      {"c":[{"v":"JAN"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
      {"c":[{"v":"DEC"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
      {"c":[{"v":"NOV"},{"v":49023.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: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 1);}, type: "string", role: "annotation"},
    2, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 2);}, type: "string", role: "annotation"},
    3, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 3);}, type: "string", role: "annotation"},
    4, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 4);}, type: "string", role: "annotation"},
    5, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 5);}, type: "string", role: "annotation"},
    6, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 6);}, type: "string", role: "annotation"}
  ]);

  function getAnnotation(dataTable, rowIndex, columnIndex) {
    return dataTable.getFormattedValue(rowIndex, columnIndex) || null;
  }

  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>