datatable - 我需要过滤 Google Charts 中使用的 google.visualization.datatable 中的元素

Question

我正在使用这段代码填充我的谷歌数据表

$.ajax({
    url: "Default2.aspx/GetChartData",
    data: "",
    dataType: "json",
    type: "POST",
    contentType: "application/json; chartset=utf-8",
    success: function (data) {
        chartData = data.d;
    },
    error: function () {
    alert("Error loading data! Please try again.");
    }
}).done(function () {
        google.charts.setOnLoadCallback(drawChart);
    });
function drawChart() {
      var data = google.visualization.arrayToDataTable(chartData);

现在我想根据一些过滤器删除行，这些过滤器检查数据表行中的特定值(日期)。但问题是文档中没有任何方法可以用来遍历行元素。

Answer 1

你可以使用 DataView仅显示数据表中的某些行

使用 getFilteredRows和 setRows 方法...

getFilteredRows 方法返回满足特定条件的行索引数组

条件是条件数组

你传递列索引和条件

例如--> {column: 0, minValue: 2016} -- (第一列必须 >= 2016)
例如--> {column: 0, value: 2017} -- (第一列必须 = 2017)
例如--> {column: 0, maxValue: 2015} --(第一列必须 <= 2015)

查看下面的数据表...

var data = google.visualization.arrayToDataTable([
  ['X', 'Y1', 'Y2'],
  [2010, 10, 14],
  [2011, 14, 22],
  [2012, 16, 24],
  [2013, 22, 30],
  [2014, 28, 36],
  [2015, 30, 44],
  [2016, 34, 42],
  [2017, 36, 44],
  [2018, 42, 50],
  [2019, 48, 56]
]);

要过滤 'X' 列(第 0 列)，我们可以说...

data.getFilteredRows([{column: 0, minValue: 2016}])

您也可以使用多个条件...

data.getFilteredRows([
  {column: 0, minValue: 2016},
  {column: 1, minValue: 40}
])`

然后将返回的行索引传递给数据 View 上的setRows

var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
  {column: 0, minValue: 2016},
  {column: 1, minValue: 40}
]));

---

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y1', 'Y2'],
    [2010, 10, 14],
    [2011, 14, 22],
    [2012, 16, 24],
    [2013, 22, 30],
    [2014, 28, 36],
    [2015, 30, 44],
    [2016, 34, 42],
    [2017, 36, 44],
    [2018, 42, 50],
    [2019, 48, 56]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([
    {column: 0, minValue: 2016},
    {column: 1, minValue: 40}
  ]));

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(view);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

编辑

您可以过滤任何类型，包括日期，

这里是一个过滤准确日期的例子......

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y1', 'Y2'],
    [new Date(2016, 7, 1), 10, 14],
    [new Date(2016, 8, 1), 14, 22],
    [new Date(2016, 9, 1), 16, 24],
    [new Date(2016, 10, 1), 22, 30],
    [new Date(2016, 11, 1), 28, 36],
    [new Date(2017, 0, 1), 30, 44],
    [new Date(2017, 1, 1), 34, 42],
    [new Date(2017, 2, 1), 36, 44],
    [new Date(2017, 3, 1), 42, 50],
    [new Date(2017, 4, 1), 48, 56]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([
    {column: 0, value: new Date(2016, 11, 1)}
  ]));

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(view);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:如果日期值包含特定时间值，那么您将需要使用一个范围来过滤特定日期...

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y1', 'Y2'],
    [new Date(2017, 0, 1, 12, 35, 16), 30, 44],
    [new Date(2017, 0, 1, 14, 46, 10), 34, 42],
    [new Date(2017, 0, 1, 16, 12, 44), 36, 44],
    [new Date(2017, 0, 1, 17, 20, 47), 42, 50],
    [new Date(2017, 0, 1, 18, 23, 59), 48, 56],
    [new Date(2017, 0, 2, 12, 35, 16), 30, 44],
    [new Date(2017, 0, 2, 14, 46, 10), 34, 42],
    [new Date(2017, 0, 2, 16, 12, 44), 36, 44],
    [new Date(2017, 0, 2, 17, 20, 47), 42, 50],
    [new Date(2017, 0, 2, 18, 23, 59), 48, 56]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([{
    column: 0,
    minValue: new Date(2017, 0, 1, 0, 0, 0),
    maxValue: new Date(2017, 0, 1, 23, 59, 59)
  }]));

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(view);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>