绑定Google图表可视化StringFilter和CategoryFilder

问题描述

是否有一个to选项将StringFilter和CategoryFilter绑定到表上?

Is there an to option bind StringFilter and CategoryFilter together against table?

我尝试了以下操作，但类别过滤器有效，而字符串过滤器无效.

I tried with following and category filter is working and string filter is not working.

filterTeamData - Category Filter
filterTestCaseName - String Filter

    new google.visualization.Dashboard(document.getElementById('dashboard'))
                    .bind([filterTeamData, filterTestCaseName], tableFlakyTests)
                    .draw(responseDataTable);

推荐答案

似乎可以在这里使用，请参见以下示例...

seems to work here, see following example...

google.charts.load('current', {
  callback: function () {
    var theData = [
      ["08-May-16",9,0,0,68,50,1,4,7,0],
      ["09-May-16",7,0,0,84,175,0,14,37,0],
      ["10-May-16",7,0,0,67,170,0,9,46,0],
      ["11-May-16",7,0,0,53,164,0,7,42,0],
      ["12-May-16",7,0,0,63,146,0,3,41,0],
      ["13-May-16",7,0,0,114,165,0,7,36,0],
      ["14-May-16",7,1,0,69,135,0,7,32,0],
      ["15-May-16",1,0,0,76,62,0,4,11,0],
      ["16-May-16",14,8,0,62,156,0,13,49,0],
      ["17-May-16",8,17,0,48,149,0,5,48,2],
      ["18-May-16",7,0,0,58,146,0,3,40,2],
      ["19-May-16",3,0,0,49,140,0,6,36,0],
      ["20-May-16",9,2,0,56,158,0,1,40,1],
      ["21-May-16",6,0,0,54,147,0,5,40,4],
      ["22-May-16",5,0,0,69,57,0,2,13,0],
      ["23-May-16",7,0,0,61,178,0,11,69,5],
      ["24-May-16",10,5,0,76,162,0,9,56,4],
      ["25-May-16",34,0,0,841,159,0,5,41,4],
      ["26-May-16",41,0,0,1206,85,0,4,21,0],
      ["27-May-16",56,0,0,745,216,0,10,36,2],
      ["28-May-16",94,1,0,198,146,0,9,30,2],
      ["29-May-16",66,0,0,12,67,0,3,7,0],
      ["30-May-16",59,0,0,876,46,0,6,17,0],
      ["31-May-16",140,4,0,2187,203,0,19,42,2],
      ["01-Jun-16",43,0,0,1029,147,0,95,47,0],
      ["02-Jun-16",136,18,0,941,510,0,260,163,11],
      ["03-Jun-16",79,0,0,462,446,0,146,116,9],
      ["04-Jun-16",29,1,0,669,387,0,83,81,0],
      ["05-Jun-16",45,0,0,791,215,0,36,48,5],
      ["06-Jun-16",111,0,0,643,478,0,238,159,8],
      ["07-Jun-16",3,0,0,170,12,0,0,0,0],
    ];
    var data = google.visualization.arrayToDataTable([['OrderDate', 'CAE', 'Com','ComPro','EBIF','FRC','IVR','NAT','PRO','X1U']].concat(theData), false);

    var controlCat = new google.visualization.ControlWrapper({
      controlType: 'CategoryFilter',
      containerId: 'category_div',
      options: {
        filterColumnIndex: 0
      }
    });

    var controlStr = new google.visualization.ControlWrapper({
      controlType: 'StringFilter',
      containerId: 'string_div',
      options: {
        matchType: 'any',
        filterColumnIndex: 0
      }
    });

    var chart = new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'chart_div',
      options: {
        isStacked: true,
        hAxis: {slantedText: true},
        title: 'National 30 days',
        height: 420
      }
    });

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind([controlCat, controlStr], chart);
    dash.draw(data);
  },
  packages:['controls', 'corechart', 'table']
});

.control {
  display: inline-block;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div class="control" id="string_div"></div>
  <div class="control" id="category_div"></div>
  <div id="chart_div"></div>
</div>

这篇关于绑定Google图表可视化StringFilter和CategoryFilder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！