我使用以下示例创建了一个下拉菜单：https://jsfiddle.net/asgallant/WaUu2/，可以选择一个列，然后在图表上显示该行。
但是我也想使用ChartRangeFilter，但问题是这个方法没有使用仪表板，所以我不知道是不是开始让所有东西一起工作。我发现的大多数示例都使用此仪表板方法。
我希望它大致类似于此示例http://jsfiddle.net/x7pyk55q/4/，但希望对列进行过滤。
如果有人能以正确的方式为我提供一个示例，那就太好了。谈到这一点，我有点新鲜。
我的代码：
<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>
答案 0 :(得分：1)
您可以使用 ChartRangeFilter 设置view.rows
类似于 CategoryFilter 设置view.columns
当 ChartRangeFilter 上的'statechange'事件触发时，
使用它state来过滤所选范围的行
然后重绘图表
应使用与图表相同的数据和视图绘制 ChartRangeFilter并在 CategoryFilter 更改时重新绘制
请参阅以下工作代码段...
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>
注意：
建议使用loader.js加载库，而不是jsapi
根据release notes ...
通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。
<script src="https://www.gstatic.com/charts/loader.js"></script>
这将仅更改load声明
google.charts.load('current', {packages:['controls','corechart']});
您还可以在callback语句中加入load，如上面的代码段所示......