1
我想顯示3個圖形和一個控制器。我有一個圖形和一個控制器。現在我需要使用相同的數據庫（電子表格鏈接）創建另外兩個圖表，比餅圖，示例條形圖或折線圖或....我的代碼至今爲止如下。如何將第二個圖表添加到Google圖表中的儀表板？
我最近開始使用JavaScript，這只是我的第一週，所以我不知道如何讓它工作。任何幫助表示讚賞。
P.S.你可以使用你想要的圖表的任何列。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {
'packages': ['corechart', 'controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0');
query.setQuery('SELECT C,H LIMIT 10 OFFSET 3');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var data_view = new google.visualization.DataView(data);
data_view.setColumns([
// 0'th column formatted to string.
{
calc: function(data, row) {
return data.getFormattedValue(row, 0);
},
type: 'string'
},
// 1th column.
1
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnIndex': 1
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart);
// Draw the dashboard.
dashboard.draw(data_view);
}
</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>
</body>
</html>
希望這有助於... – WhiteHat