Скрыть строки, которые имеют только видимые нулевые значения (Google Charts - Table View)

Question

Я разработал функцию, которая позволяет пользователю скрывать / показывать столбцы.Google Charts делает одну вещь - перечисляет все строки в списке, даже если видимая строка имеет нулевые значения.Есть ли способ автоматически скрывать строки, в которых нет данных?Я приложил скриншот, чтобы продемонстрировать строки с нулевыми значениями.

Answer 1

Вы можете использовать метод таблицы данных -> getFilteredRows ()

метод возвращает массив индексов строк, соответствующих критериям,
следующий вернет строку, где второй столбец не нулевой ...

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

затем вы можете использовать возвращенный массив в представлении данных или оболочке диаграммы,
см. следующий рабочий фрагмент, который использует оба ...

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

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

<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>