CategoryFilter作为列选择器 [英] CategoryFilter as column selector
本文介绍了CategoryFilter作为列选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用以下示例创建了一个下拉菜单： https://jsfiddle.net/asgallant/ WaUu2 / 使得可以选择一列，然后在图形上显示线。
但是我也想使用ChartRangeFilter，但是问题是此方法不使用仪表板，因此我不知道是否要开始使所有内容协同工作。我发现的大多数示例都使用此仪表板方法。
我希望它大致类似于此示例 http://jsfiddle.net/x7pyk55q/4/ ，但想继续对列进行过滤。
如果有人可以提供我，那会很好一个例子，如何正确地做到这一点。
我的代码：
< html>
< head>
< title>温度图表< / title>
< link rel = stylesheet type = text / css href = graph.css>
<！-加载Ajax API->
< script type = text / javascript src = https://www.google.com/jsapi>< / script>
< script type = text / javascript src = http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script>
< script type = text / javascript>
//加载Visualization API和piechart程序包。
google.load（可视化， 1.1，{程序包：[控件，核心图表]}））；
< / script>
< / head>
< body>
< ;!-这是将保存饼图的div->
< div id = colFilter_div>< / div>
< div id = chart_div>< / div>
<脚本语言= JavaScript>
//设置在加载Google Visualization API时运行的回调。
google.setOnLoadCallback（drawChart）;
函数drawChart（）{
//使用从服务器加载的JSON数据创建数据表。
var jsonData = {\ cols\：[{\ id\：\ \，\ label\：\ datetime\， \ type\：\ datetime\}，{\ id\：\ \，\ label\：\ RPI1\，＼ ＼ type\：\ number\}，{\ id\：\ \，\ label\：\ RPI2\，\ type\：\ number\}]，\ rows\：[{\ c\：[{\ v\：\ Date（2017 ，0，3，15，40，41）\}，{\ v\：\ 22\}，{\ v\：null}]}，{＼ ＼ c\：[{\ v\：\ Date（2017，0，3，15，40，52）\}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3 ，15，41，2）\}，{\ v\：\ 22\}，{\ v\：null}]}，{\ c＼ ＼：[{\ v\：\ Date（2017，0，3，15，41，12）\}，{\ v\：\ 20\ }，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41 ，22）\}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[ {\ v\：\ Date（2017，0，3，15，41，32）\}，{\ v\：\ 21\}，{ \ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41，43）＼ ＼}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41，53）\}，{\ v\：\ 20\}，{\ v \：null}]}，{\ c\：[{\ v\： \ Date（2017，0，3，15，42，3）\}，{\ v\：\ 21\}，{\ v\：null }]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，42，13,13）\}，{\ v \：\ 22\}，{\ v\：null}]}，{\ c\：[{\ v\：\日期（2017，0，3，15，42，23）\}，{\ v\：\ 21\}，{\ v\：null}]}， {\ c\：[{\ v\：\ Date（2017，0，3，15，42，42,34）\}，{\ v\： \ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0 ，3，15，42，44）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，42，54,54）\}，{\ v\：\ 19 \}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15 ，43，4）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\ ：[{\ v\：\ Date（2017，0，3，15，43，15,15）\}，{\ v\：\ 22\} ，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，43，25 ）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{＼ ＼ v\：\ Date（2017，0，3，15，43，43,35）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，43，45）\ }，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v＼ ＼：＼ ＼ Date（2017，0，3，15，43，55）\}，{\ v\：\ 20\}，{\ v\：null} ]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，44，6,6）\}，{\ v＼ ＼：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（ 2017，0，3，15，44，16，16）\}，{\ v\：\ 19\}，{\ v\：null}]}，{ \ c\：[{\ v\：\ Date（2017，0，3，15，44，26））\}，{\ v\：＼ ＼ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0， 3，15，44，36）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c \：[{\ v\：\ Date（2017，0，3，15，44，47）\}，{\ v\：\ 20＼ ＼}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15， 44，57）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\： [{\ v\：\ Date（2017，0，3，15，45，7）\}，{\ v\：\ 19\}， {\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，17） \}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，27）\}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，38）\} ，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\ ：\ Date（2017，0，3，15，45，48）\}，{\ v\：\ 21\}，{\ v\：null}] }，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，58）\}，{\ v\ ：\ 23\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017 ，0，3，15，46，8）\}，{\ v\：\ 23\}，{\ v\：null}]}，{＼ ＼ c\：[{\ v\：\ Date（2017，0，3，15，46，18）\}，{\ v\：null} ，{\ v\：\ 24\}]}}，{\ c\：[{\ v\：\ Date（2017，0，3 ，15，46，29）\}，{\ v\：null}，{\ v\：\ 22\}]} ,, {\ c＼ ＼：[{\ v\：\ Date（2017，0，3，15，46，39）\}，{\ v\：null}，{\ v\：\ 22\}]}}，{\ c\：[{\ v\：\ Date（2017，0，3，15，46 ，49）\}，{\ v\：null}，{\ v\：\ 21\}]}}，{\ c\：[ {\ v\：\ Date（2017，0，3，15，46，59）\}，{\ v\：null}，{\ v\ ：\ 21\}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，47，10）＼ ＼}，{\ v\：null}，{\ v\：\ 22\}]}}，{\ c\：[{\ v\：\ Date（2017，0，3，15，47，20）\}，{\ v\：null}，{\ v\：\ 21\}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，47，30）\}， {\ v\：null}，{\ v\：\ 21\}]}，{\ c\：[{\ v\ ：\ Date（2017，0，3，15，47，40）\}，{\ v\：null}，{\ v\：\ 22\}] }]}
var data = new google.visualization.DataTable（JSON.parse（jsonData））;
//在控制台中返回JSON数据
console.log（JSON.stringify（data））;
var columnTableTable = new google.visualization.DataTable（）;
columnsTable.addColumn（'number'，'colIndex'）;
columnsTable.addColumn（'string'，'colLabel'）;
var initState = {selectedValues：[]};
//将列放入此数据表（跳过列0）
for（var i = 1; i< data.getNumberOfColumns（）; i ++）{
columnsTable.addRow（[ i，data.getColumnLabel（i）]）;
}
initState.selectedValues.push（data.getColumnLabel（1））;
var chart = new google.visualization.ChartWrapper（{
chartType：'LineChart'，
containerId：'chart_div'，
dataTable：data，
选项：{
标题： Temps，
宽度：1600，
高度：600，
hAxis：{
标题： DateTime
}，
vAxis：{
title：'Temperature'，
}
}
}）；
var columnFilter = new google.visualization.ControlWrapper（{
controlType：'CategoryFilter'，
containerId：'colFilter_div'，
dataTable：columnsTable，
选项：{
filterColumnLabel：'colLabel'，
ui：{
标签：''，
标题：'Select RPI'，
allowTyping：false，
allowMultiple：true，
allowNone：false，
selectedValuesLayout：'aside'
}
}，
state：initState
}）;
函数setChartView（）{
var state = columnFilter.getState（）;
var行；
var view = {
栏：[0]
};
for（var i = 0; i< state.selectedValues.length; i ++）{
row = columnsTable.getFilteredRows（[{column：1，value：state.selectedValues [i]}]） [0];
view.columns.push（columnsTable.getValue（row，0））;
}
//将索引按原始顺序排序
view.columns.sort（function（a，b）{
return（a-b）;
}）;
chart.setView（view）;
chart.draw（）;
}
google.visualization.events.addListener（columnFilter，'statechange'，setChartView）;
setChartView（）;
columnFilter.draw（）;
}
< / script>
< / body>
< / html>
解决方案
您可以使用 ChartRangeFilter 设置 view.rows
与 CategoryFilter 设置 view.columns
当'statechange'事件触发时在 ChartRangeFilter 上，
使用其状态来过滤所选范围内的行，
然后重新绘制图表
应该使用与图表相同的数据和视图绘制ChartRangeFilter
，并在 CategoryFilter 更改
请参阅以下工作摘要...
google.charts.load（'current'，{回调：drawChart，包：['controls'，' corechart’]}））; function drawChart（）{//根据从服务器加载的JSON数据创建数据表。 var jsonData = {\ cols\：[{\ id\：\ \，\ label\：\ datetime\，\ type \：\ datetime\}，{\ id\：\ \，\ label\：\ RPI1\，\ type＼ ＼：\数字\}，{\ id\：\ \，\标签\：\ RPI2\，\类型\ ：\ number\}]，\ rows\：[{\ c\：[{\ v\：\ Date（2017，0，3 ，15，40，41）\}，{\ v\：\ 22\}，{\ v\：null}]}，{\ c＼ ＼：[{\ v\：\ Date（2017，0，3，15，40，52）\}，{\ v\：\ 21\ }，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41 ，2）\}，{\ v\：\ 22\}，{\ v\：null}]}，{\ c\：[ {\ v\：\ Date（2017，0，3，15，41，12）\}，{\ v\：\ 20\}，{ \ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41，22）＼ ＼}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41，32）\}，{\ v\：\ 21\}，{\ v \：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，41，43）\}， {\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\ ：\ Date（2017，0，3，15，41，53）\}，{\ v\：\ 20\}，{\ v\： null}]}，{\ c\：[{\ v\：\日期（201 7，0，3，15，42，3）\}，{\ v\：\ 21\}，{\ v\：null}]}，{ \ c\：[{\ v\：\ Date（2017，0，3，15，42，13,13）\}，{\ v\：＼ ＼ 22\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0， 3，15，42，23）\}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c \：[{\ v\：\日期（2017，0，3，15，42，34）34}，{\ v\：\ 21＼ ＼}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15， 42，44）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\： [{\ v\：\ Date（2017，0，3，15，42，54）\}，{\ v\：\ 19\}， {\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，43，4） \}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，43，15,15）\}，{\ v\：\ 22\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，43，25）\} ，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\ ：\ Date（2017，0，3，15，43，35）\}，{\ v\：\ 20\}，{\ v\ ：null}]}，{\ c\：[{\ v\：\日期（2017，0，3，15，43，45）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ 日期（2017年，0，3，15，43，55）\}，{\ v\：\ 20\}，{\ v\：null}]}，{＼ ＼ c\：[{\ v\：\ Date（2017，0，3，15，44，6,6）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3 ，15，44，16，16）\}，{\ v\：\ 19\}，{\ v\：null}]}，{\ c＼ ＼：[{\ v\：\ Date（2017，0，3，15，44，26）\}，{\ v\：\ 20\ }，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，44 ，36）\}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[ {\ v\：\ Date（2017，0，3，15，44，47）\}，{\ v\：\ 20\}，{ \ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，44，57）＼ ＼}，{\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，7）\}，{\ v\：\ 19\}，{\ v \：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，17）\}， {\ v\：\ 20\}，{\ v\：null}]}，{\ c\：[{\ v\ ：\ Date（2017，0，3，15，45，27）\}，{\ v\：\ 21\}，{\ v\： null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，38）\}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\日期（2017， 0，3，15，45，48）\}，{\ v\：\ 21\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，45，58）\}，{\ v\：\ 23\}，{\ v\：null}]}，{\ c\：[{\ v\：\ Date（2017，0，3， 15，46，8）\}，{\ v\：\ 23\}，{\ v\：null}]}，{\ c\ ：[{\ v\：\ Date（2017，0，3，15，46，18）\}，{\ v\：null}，{\ v\：\ 24\}]}}，{\ c\：[{\ v\：\ Date（2017，0，3，15，46， 29）\}，{\ v\：null}，{\ v\：\ 22\}]}}，{\ c\：[{ \ v\：\日期（2017，0，3，15，46，39）\}，{\ v\：null}，{\ v\ ：\ 22\}]}，{\ c\：[{\ v\：\ Date（2017，0，3，15，46，49）\ }，{\ v\：null}，{\ v\：\ 21\}]}，{\ c\：[{\ v \：\日期（2017，0，3，15，46，59）\}，{\ v\：null}，{\ v\：\ 21\}]}，{\ c\：[{\ v\：\日期（2017，0，3，15，47，10）\}，{ \ v\：null}，{\ v\：\ 22\}]}，{\ c\：[{\ v\： \ Date（2017，0，3，15，47，20）\}，{\ v\：null}，{\ v\：\ 21\ }]}，{\ c\：[{\ v\：\日期（2017，0，3，15，47，30）\}，{\ v \：null}，{\ v\：\ 21\}]}}，{\ c\：[{\ v\：\日期（2017年， 0，3，15，47，40）\}，{\ v\：null}，{\ v\：\ 22\}]}}}} var数据=新的google.visualization.DataTable（JSON.parse（jsonData））; var columnsTable = new google.visualization.DataTable（）; columnTable.addColumn（'number'，'colIndex'）; columnTable.addColumn（'string'，'colLabel'）; var initState = {selectedValues：[]}; //将列放入此数据表中（跳过列0），用于（var i = 1; i< data.getNumberOfColumns（）; i ++）{columnsTable.addRow（[i，data.getColumnLabel（i）]）; } initState.selectedValues.push（data.getColumnLabel（1））; var chart = new google.visualization.ChartWrapper（{chartType：'LineChart'，containerId：'chart_div'，dataTable：data，options：{title：'Temps'，width：1600，height：600，hAxis：{title：' DateTime'}，vAxis：{title：'Temperature'，}}}）; var rangeFilter = new google.visualization.ControlWrapper（{controlType：'ChartRangeFilter'，containerId：'rngFilter_div'，dataTable：data，options：{filterColumnIndex：0，ui：{chartOptions：{宽度：1600，高度：200，hAxis： {title：'DateTime'}，vAxis：{title：'Temperature'}}}}}））; var columnFilter = new google.visualization.ControlWrapper（{controlType：'CategoryFilter'，containerId：'colFilter_div'，dataTable：columnsTable，options：{filterColumnLabel：'colLabel'，ui：{label：''，标题：'Select RPI' ，allowTyping：false，allowMultiple：true，allowNone：false，selectedValuesLayout：'aside'}}，状态：initState}）；函数setChartViewCols（）{var state = columnFilter.getState（）; var row; var view = {列：[0]}; for（var i = 0; i< state.selectedValues.length; i ++）{row = columnsTable.getFilteredRows（[{column：1，value：state.selectedValues [i]}]）[0]; view.columns.push（columnsTable.getValue（row，0））; } //将索引排序到其原始顺序view.columns.sort（function（a，b）{return（a-b）;}）; view.rows = null; chart.setView（view）; chart.draw（）; rangeFilter.setView（view）; rangeFilter.setState（）; rangeFilter.draw（）; } google.visualization.events.addListener（columnFilter，'statechange'，setChartViewCols）;函数setChartViewRows（）{var state = rangeFilter.getState（）; var view = chart.getView（）; view.rows = rangeFilter.getDataTable（）。getFilteredRows（[{column：0，minValue：state.range.start，maxValue：state.range.end}]）;; chart.setView（view）; chart.draw（）; } google.visualization.events.addListener（rangeFilter，'statechange'，setChartViewRows）; setChartViewCols（）; columnFilter.draw（）;}
< script src = https://www.gstatic.com/charts/loader.js></script><div id = colFilter_div>< / div>< div id = chart_div>< ; / div>< div id = rngFilter_div>< / div>
注意：
推荐使用 loader .js 来加载库，而不是 jsapi
href = https://developers.google.com/chart/interactive/docs/release_notes rel = nofollow noreferrer>发行说明 ...
< blockquote>
可通过jsapi加载程序保持可用的Google Charts版本不再保持一致更新。从现在开始，请使用新的静态加载器。
< script src = https://www.gstatic.com/charts/loader.js >< / script>
这只会 更改 load 语句
google.charts.load（'current'，{packages：['controls'，'corechart'] }）;
您还可以在<$ c $中包括回调 c> load 语句，如上面的代码片段...
I used the following example to create a drop down menu: https://jsfiddle.net/asgallant/WaUu2/ which makes it possible to select a column and then show the line on the graph.
But I also want to use a ChartRangeFilter but the problem is this method doesn't use a dashboard so I have no clue were to start to make everything work together. And most of the examples I found use this dashboard method.
I want it to approximately to be like this example http://jsfiddle.net/x7pyk55q/4/ but would like to keep filtering on the columns.
It would be nice if someone could provide me an example how to do it the right way. I'm a bit new when it comes to this.
My code:
<html>
<head>
<title>Temperature Chart</title>
<link rel="stylesheet" type="text/css" href="graph.css">
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['controls','corechart']});
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="colFilter_div"></div>
<div id="chart_div"></div>
<script language="JavaScript">
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var jsonData = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"RPI1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"RPI2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}"
var data = new google.visualization.DataTable(JSON.parse(jsonData));
// return the JSON data in console
console.log(JSON.stringify(data));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(1));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Temps',
width: 1600,
height: 600,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature',
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label:'',
caption: 'Select RPI',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
</script>
</body>
</html>
解决方案
you can use the ChartRangeFilter to set the view.rows
similar to how the CategoryFilter sets the view.columns
when the 'statechange' event fires on the ChartRangeFilter,
use it's state to filter the rows for the range selected,
then redraw the chart
the ChartRangeFilter should be drawn using the same data and view as the chart
and re-drawn when the CategoryFilter changes
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['controls','corechart']
});
function drawChart() {
// Create our data table out of JSON data loaded from server.
var jsonData = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"RPI1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"RPI2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}"
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(1));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Temps',
width: 1600,
height: 600,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature',
}
}
});
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'rngFilter_div',
dataTable: data,
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
width: 1600,
height: 200,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature'
}
}
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label:'',
caption: 'Select RPI',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
state: initState
});
function setChartViewCols () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
view.rows = null;
chart.setView(view);
chart.draw();
rangeFilter.setView(view);
rangeFilter.setState();
rangeFilter.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartViewCols);
function setChartViewRows () {
var state = rangeFilter.getState();
var view = chart.getView();
view.rows = rangeFilter.getDataTable().getFilteredRows([{
column: 0,
minValue: state.range.start,
maxValue: state.range.end
}]);
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(rangeFilter, 'statechange', setChartViewRows);
setChartViewCols();
columnFilter.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="colFilter_div"></div>
<div id="chart_div"></div>
<div id="rngFilter_div"></div>
note:
recommend using loader.js to load the library, instead of jsapi
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement
google.charts.load('current', {packages:['controls','corechart']});
you can also include the callback in the load statement, as in the above snippet...
这篇关于CategoryFilter作为列选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
