How to remove zeros present in the bottom of google charts

问题

I have created the following chart:

The javascript function which I have used is as follows:

    <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);
}

I see some zeros appearing in the X Axis whereas the JSON does not contain any 0's. How can I get rid of these zeros?

回答1:

Here's an example of a custom calculated column that returns null for the annotation, if the value is also null.

It's ugly because calc: doesn't pass the columnIndex.

A cleaner way might be to add the annotation columns to the google DataTable, instead of using a 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>

来源：https://stackoverflow.com/questions/35770029/how-to-remove-zeros-present-in-the-bottom-of-google-charts