我在尝试使用对 Google 工作表的两个查询来设置带有两个图表和两个 controlwrapper 的 Google Charts 仪表板时遇到了麻烦。
我已经浏览了这里的许多示例，这些示例演示了来自单一来源的多个图表，或者多个图表的多个查询，但没有控制方面。
我最终尝试对单个 Google 工作表运行两个查询，每个查询根据查询字符串从工作表中提取一组不同的数据，然后在图表中显示数据。还有一个 filterColumn 控件包装器，用于从数据表中选择数据。
我有以下代码适用于一个查询和图形。当我尝试将过程加倍以便可以在一个页面中显示两者时，会出现一个或另一个图表，但不会同时出现。我知道这可能与查询之间的冲突有关，但我不明白。我尝试构建一个函数来运行将由 google.setOnLoadCallback 函数启动的两个查询。然而，这并没有奏效。我尝试使用其他示例作为指南来组合各个部分，但这些都不起作用。这是最接近的版本，当我连续多次刷新它时，有时会加载一个图表，有时会加载另一个，但绝不会同时加载。
如果有人能指出我正确的方向，我将不胜感激。
<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', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initialize);
google.setOnLoadCallback(initialize2);
function initialize() {
var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B");
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString);
// Send the query with a callback function.
query.send(drawDashboard);
}
function initialize2() {
var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B");
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2);
// Send the query with a callback function.
query2.send(drawDashboard2);
}
function drawDashboard(response) {
var data = response.getDataTable();
// Everything is loaded. Assemble your dashboard...
var namePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Sample ID',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var laptimeChart = new google.visualization.ChartWrapper({
'chartType': 'Bar',
'containerId': 'chart_div',
'dataSourceUrl': 'https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1',
'query': "select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B",
'options': {
'width': 1600,
'height': 800,
axes: {
x: {
0: {
side: 'top',
label: 'Sample ID'
} // Top x-axis.
}
},
chart: {
title: 'Aging Panel Results',
subtitle: 'Beer force-aged for 2 weeks',
},
'legend': {
position: 'none'
},
'colors': ['#ed8907']
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind(namePicker, laptimeChart).
draw(data)
}
function drawDashboard2(response2) {
var data2 = response2.getDataTable();
// Everything is loaded. Assemble your dashboard...
var namePicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div2',
'options': {
'filterColumnLabel': 'Sample ID',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var laptimeChart2 = new google.visualization.ChartWrapper({
'chartType': 'Bar',
'containerId': 'chart_div2',
'options': {
'width': 1600,
'height': 800,
axes: {
x: {
0: {
side: 'top',
label: 'Sample ID'
} // Top x-axis.
}
},
chart: {
title: 'Aging Panel Results',
subtitle: 'Beer aged 2 weeks',
},
'legend': {
position: 'none'
},
'colors': ['Red']
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')).
bind(namePicker2, laptimeChart2).
draw(data2)
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
<div id="dashboard_div2">
<!--Divs that will hold each control and chart-->
<div id="filter_div2"></div>
<div id="chart_div2"></div>
</div>
</body>
</html>