我已经使用 Google Charts 制作了一个图表,并且想应用一些过滤器。 我发现了如何按行(图表下方表格中的主题)过滤图表,而不是按图例中显示的列(pete、john、carl、andrea)过滤图表。
查看我在 jsFiddle 上的图表 http://jsfiddle.net/fcqeA/
//Filtering subjects:
var compPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Subject',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
但现在通过传奇项目...... 我想我忽略了一些东西,但我真的找不到它......我希望我的问题很清楚
最佳答案
终于找到了方法,以为会有更简单的方法,但也许没有
// Place graph
var drawChart = new google.visualization.Dashboard(document.getElementById('dashboard')).bind([compPicker], [chart, table]);;
drawChart.draw(data);
// Filter respondents
document.getElementById('names').onchange = function(evt) {
if (evt.target.selectedIndex == 0) {
// Expectancy
chart.setView({'columns': [0,1,2,3,4]});
chart.setOption('colors', ["#FFC000","#00b0f0","#ff0000","#92d050"]);
} else if (evt.target.selectedIndex == 1) {
chart.setView({'columns': [0,1]});
chart.setOption('colors', ["#FFC000"]);
} else if (evt.target.selectedIndex == 2) {
chart.setView({'columns': [0,2]});
chart.setOption('colors', ["#00b0f0"]);
} else if (evt.target.selectedIndex == 3) {
chart.setView({'columns': [0,3]});
chart.setOption('colors', ["#ff0000"]);
} else if (evt.target.selectedIndex == 4) {
chart.setView({'columns': [0,4]});
chart.setOption('colors', ["#92d050"]);
} else {
chart.setView({'columns': [0,1,2,3,4]});
chart.setOption('colors', ["#FFC000","#00b0f0","#ff0000","#92d050"]);
}
drawChart.draw(data);
};
<select id="names">
<option value="all">all</option>
<option value="pete">pete</option>
<option value="john">john</option>
<option value="carl">carl</option>
<option value="andrea">andrea</option>
</select>
完整代码和示例 http://jsfiddle.net/fcqeA/1/
关于javascript - 按传奇项目过滤 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12475185/