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

Question

<!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,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['Gym', 0,0],
        ['Sleep', 8,8],
        ['VehicleNumbering', 8,8],
        ['Eat', 0,0],
        ['TV', 4,4],
        ['Gym', 0,0],
        ['Sleep', 8,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 的列。我需要显示有数据的列。

我该怎么做？

Answer 1

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

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

我们使用 getFilteredRows 方法查找不为零的行。

然后将 return 值提供给 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,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['Gym', 0,0],
    ['Sleep', 8,8],
    ['VehicleNumbering', 8,8],
    ['Eat', 0,0],
    ['TV', 4,4],
    ['Gym', 0,0],
    ['Sleep', 8,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>

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

On Google bar charts, I am unable to remove columns which do not have data

javascript

charts

google-visualization

bar-chart

google-barchart