绑定谷歌图表可视化StringFilter和CategoryFilder

Question

是否有一个选项将StringFilter和CategoryFilter绑定在一起？

我尝试使用以下和类别过滤器工作，并且字符串过滤器不起作用。

filterTeamData - Category Filter 
filterTestCaseName - String Filter 

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

Answer 1

似乎在这里工作，看下面的例子...

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>