第一次在这里发帖。
我正在尝试开发一个显示多个图表的谷歌仪表板。每个图表都需要从不同的数据表中获取数据。这些数据表通过 JSON 提要从同一个 Google 电子表格中填充。我通过对谷歌电子表格运行查询来生成数据表，并在谷歌返回查询时将它们存储为变量。
更复杂的是，我有需要影响每个图表的类别过滤器。这是通过为每个单独的数据表创建一个仪表板来完成的，就像一个“逻辑”仪表板，将它们聚合在一起，我正在为每个数据表创建类别过滤器。我正在监听事件的类别过滤器的第一个实例，以影响其他仪表板上的其他类别过滤器。这样，所有图表都受仅在类别过滤器上所做的状态更改的影响。
为了概念证明，我正在开发以下代码，我已经运行了 Javascript 控制台并修复了所有错误，但我仍然得到一个空白页。
我希望以上内容有意义，在此先感谢您的帮助。
<html>
<head>
<title>Google visualisation demo: chart query controls</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
// Packages for all the other charts you need will be loaded
// automatically by the system.
google.load('visualization', '1.1', {'packages':['controls','linechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisualization);
// Declare variables outside of functions.
var data1;
var data2;
function drawVisualization() {
// Replace the data source URL on next line with your data source URL.
var query1 = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AkjuVAUAbKOZdFM2LTByOVdLMkpFT3FmVTFyOW1jT2c&output=html');
// Apply query language.
query1.setQuery('SELECT E,F,I,C, sum(D) group by E,F,I,C');
// Send the query with a callback function.
query1.send(Dashboard1);
// Replace the data source URL on next line with your data source URL.
var query2 = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AkjuVAUAbKOZdFM2LTByOVdLMkpFT3FmVTFyOW1jT2c&output=html');
// Apply query language.
query2.setQuery('SELECT E,F,I,C, sum(D) group by E,F,I,C');
// Send the query with a callback function.
query2.send(Dashboard2);
// First category filter
network_filter = createDashboard1();
network_filter2 = createDashboard2();
// Second category filter
introducer_filter = createDashboard1();
introducer_filter2 = createDashboard2();
// Third category filter
business_filter = createDashboard1();
business_filter2 = createDashboard2();
// First category filter Event Listener
google.visualization.events.addListener(network_filter, 'statechange', function() {
network_filter2.setState(network_filter.getState());
network_filter2.draw();
});
// Second category filter Event Listener
google.visualization.events.addListener(business_filter, 'statechange', function() {
business_filter2.setState(business_filter.getState());
business_filter2.draw();
});
// Third category filter Event Listener
google.visualization.events.addListener(introducer_filter, 'statechange', function() {
introducer_filter2.setState(introducer_filter.getState());
introducer_filter2.draw();
});
}
function Dashboard1(response) {
data1 = response.getDataTable();
return data1;
}
// Everything is loaded. Assemble your dashboard...
function createDashboard1() {
// Wrapper for category filter declared in above function
var networkPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'network_filter',
'options': {
'filterColumnLabel': 'Main Network',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Wrapper for category filter declared in above function
var businessPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'business_filter',
'options': {
'filterColumnLabel': 'Business',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Wrapper for category filter declared in above function
var introducerPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'introducer_filter',
'options': {
'filterColumnLabel': 'Introducer',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Chart effected by category filter
var introducerChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'introducer_chart',
'options': {
'width': 800,
'height': 200
},
'view': {'columns': [2, 4]}
});
// Table effected by category filter
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options': {
'width': '900px'
}
});
// Bind, glue and draw dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind(networkPicker, businessPicker).
bind(businessPicker, introducerPicker).
bind(introducerPicker, introducerChart).
bind(introducerPicker, table).
draw(data1);
return networkPicker;
return businessPicker;
return introducerPicker;
return data1;
}
function Dashboard2(response) {
data2 = response.getDataTable();
return data2;
}
// Everything is loaded. Assemble your dashboard...
function createDashboard2() {
// Wrapper for category filter declared in above function
var networkPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'network_filter2',
'options': {
'filterColumnLabel': 'Main Network',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Wrapper for category filter declared in above function
var businessPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'business_filter2',
'options': {
'filterColumnLabel': 'Business',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Wrapper for category filter declared in above function
var introducerPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'introducer_filter2',
'options': {
'filterColumnLabel': 'Introducer',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// PieChart effected by category filter
var productPie = new google.visualization.ChartWrapper({
'chartType':'PieChart',
'containerId': 'product_pie',
'options': {'width': 300,'height': 300},
'view': {'columns': [3, 4]}
});
// Table effected by category filter
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table2',
'options': {
'width': '900px'
}
});
// Bind, glue and draw dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind(networkPicker, businessPicker).
bind(businessPicker, introducerPicker).
bind(introducerPicker, productPie).
bind(introducerPicker, table).
draw(data2);
return networkPicker;
return businessPicker;
return introducerPicker;
return data2;
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="network_filter"></div>
<!--Display none because its managed by event listener-->
<div id="network_filter2" style="display:none"></div>
<div id="business_filter"></div>
<!--Display none because its managed by event listener-->
<div id="business_filter2" style="display:none"></div>
<div id="introducer_filter"></div>
<!--Display none because its managed by event listener-->
<div id="introducer_filter2" style="display:none"></div>
<div id="introducer_chart"></div>
<div id="product_pie"></div>
<div id="table"></div>
<div id="table2"></div>
</div>
<body>
</html>