javascript - 谷歌图表(表格图表)

Question

我正在尝试根据用户选择的年份显示图表。我无法遍历数据。

function drawTable() {

    year = document.getElementById("thedropdown").value; 

    var data = new google.visualization.DataTable();
    data.addColumn('string','YEAR');
    data.addColumn('number', 'JAN');
    data.addColumn('number', 'FEB');
    data.addColumn('number', 'MAR');
    data.addColumn('number', 'APR');
    data.addColumn('number', 'MAY');
    data.addColumn('number', 'JUNE');
    data.addColumn('number', 'JULY');
    data.addColumn('number', 'AUG');
    data.addColumn('number', 'SEP');
    data.addColumn('number', 'OCT');
    data.addColumn('number', 'NOV');
    data.addColumn('number', 'DEC');
    data.addRows([
      ['2005',15000,20100,54637,27384,84958,43526,54637,82939,94857,53647,36456,87382],
      ['2006',13500,35464,24536,64738,53426,26373,53426,72634,53425,72837,63526,72839],
      ['2007',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2008',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2009',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2010',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2011',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2012',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2013',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
      ['2014',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],      
    ]);


    var table = new google.visualization.Table(document.getElementById('table_div'));

我只想显示用户选择的年份从 JAN 到 Dec 的值。如果用户选择 ALL，它会显示整个表格。帮我解决这个问题。

我的 Html 部分:

<form  action="#" id="form1" name="form1" onchange="drawChart()" >
    <select id="thedropdown">
        <option value="2005">2005</option>
        <option value="2006">2006</option>
    </select>
</form>

Answer 1

你不需要循环，
你可以使用数据表方法 --> getFilteredRows
创建过滤数据 View ...

var view = new google.visualization.DataView(data);
if (year !== 'All') {
  view.setRows(data.getFilteredRows([{
    column: 0,
    value: year
  }]));
}

然后使用 View 绘制图表...

google.charts.load('current', {
  packages:['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string','YEAR');
  data.addColumn('number', 'JAN');
  data.addColumn('number', 'FEB');
  data.addColumn('number', 'MAR');
  data.addColumn('number', 'APR');
  data.addColumn('number', 'MAY');
  data.addColumn('number', 'JUNE');
  data.addColumn('number', 'JULY');
  data.addColumn('number', 'AUG');
  data.addColumn('number', 'SEP');
  data.addColumn('number', 'OCT');
  data.addColumn('number', 'NOV');
  data.addColumn('number', 'DEC');
  data.addRows([
    ['2005',15000,20100,54637,27384,84958,43526,54637,82939,94857,53647,36456,87382],
    ['2006',13500,35464,24536,64738,53426,26373,53426,72634,53425,72837,63526,72839],
    ['2007',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2008',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2009',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2010',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2011',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2012',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2013',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
    ['2014',17567,25000,64738,83748,62536,35467,53647,54636,65748,93894,24356,21000],
  ]);
  var table = new google.visualization.Table(document.getElementById('table_div'));
  selectYear = document.getElementById('thedropdown');
  selectYear.addEventListener('change', drawChart, false);
  drawChart();

  function drawChart() {
    var year = selectYear.value;
    var view = new google.visualization.DataView(data);
    if (year !== 'All') {
      view.setRows(data.getFilteredRows([{
        column: 0,
        value: year
      }]));
    }
    table.draw(view);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="thedropdown">
  <option value="All" selected>All</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
</select>
<div id="table_div"></div>