隐藏仅具有可见空值的行（Google Charts - Table View）

Question

我开发了一项功能，允许用户隐藏/显示列。 Google Charts所做的一件事是列出列表中的所有行，即使可见行具有空值。有没有办法自动隐藏其中没有任何数据的行？我附上了一个截图来演示具有空值的行。

Answer 1

您可以使用数据表方法 - ＆gt; getFilteredRows()

该方法返回符合条件的行索引数组，
以下将返回第二列不为空的行...

var nonBlankRows = data.getFilteredRows([{
  column: 1,
  test: function(value, row, column, table) {
    return (value !== null);
  }
}]);

然后，您可以在数据视图或图表包装中使用返回的数组，
请参阅以下工作代码段，它使用两个...

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['controls', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');
  data.addColumn('string', 'Data');
  data.addRows([
    [new Date(2017, 11, 20), 'TEST 0'],
    [new Date(2017, 11, 21), null],
    [new Date(2017, 11, 22), null],
    [new Date(2017, 11, 23), null],
    [new Date(2017, 11, 24), null],
    [new Date(2017, 11, 25), null],
    [new Date(2017, 11, 26), 'TEST 1'],
    [new Date(2017, 11, 27), null],
    [new Date(2017, 11, 28), null],
    [new Date(2017, 11, 29), 'TEST 2']
  ]);

  var nonBlankRows = data.getFilteredRows([{
    column: 1,
    test: function(value, row, column, table) {
      return (value !== null);
    }
  }]);

  var options = {
    showRowNumber: true,
    allowHtml: true
  };

  var chartWrapper = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'wrapper-table',
    dataTable: data,
    options: options,
    view: {
      rows: nonBlankRows
    }
  });
  chartWrapper.draw();

  var view = new google.visualization.DataView(data);
  view.setRows(nonBlankRows);

  var chart = new google.visualization.Table(document.getElementById('chart-table'));
  chart.draw(view, options);
});

＆＃13;

.table {
  display: inline-block;
  margin: 6px;
  padding: 6px;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="table">
  <div id="wrapper-table"></div>
</div>
<div class="table">
  <div id="chart-table"></div>
</div>

＆＃13;

＆＃13;

＆＃13;