我需要过滤Google图表中使用的google.visualization.datatable中的元素 [英] I need to filter elements in google.visualization.datatable used in Google Charts

问题描述

我正在使用此代码填充google的数据表

I'm populating my google's datatable via using this code

$.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);

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

Now I want to delete rows based on some filters which check the particular value(date) from the row of the datatable. But the problem is that there is not any method in documentation using which i can go through row elements.

推荐答案

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

you can use a DataView to show only certain rows from the DataTable

使用 getFilteredRows 和 setRows 方法...

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

the getFilteredRows method returns an array of row indexes that meet certain criteria

条件是条件数组

您传递列索引和条件

例如-> {列：0，最小值：2016} -（第一列必须为> = 2016）

例如-> {列：0，值：2017} -（第一列必须为2017）

例如-> {列：0，最大值：2015} -（第一列必须< = 2015）

e.g. --> {column: 0, minValue: 2016} -- (first column must be >= 2016)
e.g. --> {column: 0, value: 2017} -- (first column must = 2017)
e.g. --> {column: 0, maxValue: 2015} -- (first column must be <= 2015)

请参阅以下DataTable ...

see following DataTable...

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列），我们可以说...

to filter on the 'X' column (column 0), we could say...

data.getFilteredRows（[{column：0，minValue：2016}]）

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

you can use multiple criteria as well...

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

然后将返回的行索引传递到数据视图上的 setRows

then pass the returned row indexes to setRows on the data view

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

---

请参阅以下工作摘要...

---

see following working snippet...

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>

编辑

您可以过滤包括日期在内的任何类型

you can filter on any type, including dates,

这是过滤确切日期的示例...

here is an example of filtering on exact date...

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>

注释：如果日期值包括特定时间值，那么您需要使用一个范围来过滤特定日期...

note: if the date values include specific time values, then you'll need to use a range, to filter for a specific date...

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>

这篇关于我需要过滤Google图表中使用的google.visualization.datatable中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！