如何跳过在Google条形图中显示的空行？

Question

我发现谷歌条形图中也显示空行。

Answer 1

您可以从google.visualization.DataTable中排除空行，​​如下所示：

function excludeEmptyRows(dataTable)
{
    var view = new google.visualization.DataView(dataTable);
    var rowIndexes = view.getFilteredRows([{column: 1, maxValue: 0}]); //get rows with 0 values
    view.hideRows(rowIndexes); //hide empty rows
    return view.toDataTable();
}    

示例

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', 1526000],
        ['---', 0]
      ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        },
      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(excludeEmptyRows(data), options);
    }

function excludeEmptyRows(dataTable)
{
    var view = new google.visualization.DataView(dataTable);
    var rowIndexes = view.getFilteredRows([{column: 1, maxValue: 0}]); //get rows with 0 values
    view.hideRows(rowIndexes); //hide empty rows
    return view.toDataTable();
}    

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>