在Google条形图上，我无法删除没有数据的列

问题描述

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>

</style>
</head>
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current',{'packages':['corechart']});
google.charts.setonLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task','Hours per Day',{ role: 'annotation' }],['VehicleNumbering',8,8],['Eat',0],['TV',4,4],['Gym',['Sleep',8]
    ]);

  // Optional; add a title and set the width and height of the chart
    var options = {'title':'My Average Day','width':2000,'height': window.innerHeight};

    // display the chart inside the <div> element with id="piechart"
    var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
    chart.draw(data,options);
}
</script>

</body>
</html>

页面加载时，它会显示每一列的数据（是否有数据）。我需要缩短：我不想显示没有数据的列。我需要删除值为0 5的列。我需要显示确实有数据的列。

我该怎么做？

解决方法

您可以使用数据视图绘制图表。

在创建数据视图之后，我们排除了零值的行。

我们通过使用getFilteredRows方法来查找不等于零的行。

然后将返回值提供给setRows方法。

请参阅以下工作摘要...

// Load google charts
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task','Hours per Day',{ role: 'annotation' }],['VehicleNumbering',8,8],['Eat',0],['TV',4,4],['Gym',['Sleep',8]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([{
    column: 1,test: function (value) {
      return (value !== 0);
    }
  }]));

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'My Average Day','width':2000,'height': window.innerHeight};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
  chart.draw(view,options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

bar-chart charts google-visualization javascript