我正在尝试调试此代码，我尝试按照一个完美运行的示例，我可以在没有包装的情况下显示图表和图形但是一旦我做出改变就会崩溃---- [object Object]不符合控制规范。
将所有3放在同一视图上的WORKING代码： 项目1：电子表格显示工作
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart', 'table']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(sendQuery);
// Construct and send a query to Google Spreadsheet
function sendQuery() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1Ixlanep_0VfZtnk4rzS0jb1owTIbIRWAdGr9mp7OMIc/gviz/tq?tq=');
//query.setQuery('SELECT E, F, H, I');
query.send(drawChart);
}
// The query callback function
function drawChart(response) {
// Always check for error.
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// Get DataTable from the "response" object. This is the result from your query.
// This DataTable must conform to the data format required by the chart you will draw next.
// To find out, read the Google Chart document at
// https://developers.google.com/chart/interactive/docs/
var data = response.getDataTable();
// Sort by the first column.
data.sort([{column: 0 }]);
//--------------------------------------------------------------------------
// Draw a table
//--------------------------------------------------------------------------
// We'll show the whole table. So there is no need to set call setColumns().
var tableView = new google.visualization.DataView(data);
// Create the table.
// Note that DOM element ID must be consistent with the corresponding
// ID in the HTML body section.
var myTable = new google.visualization.Table(document.getElementById('table_div'));
myTable.draw(tableView);
//--------------------------------------------------------------------------
// Draw a chart #1
//--------------------------------------------------------------------------
// Create the chart #1.
// Note that DOM element ID must be consistent with the
corresponding
// ID in the HTML body section.
// We'll show home game attendance, runs scored, runs allowed, wins, loses, and NO# games behind .
var chartView = new google.visualization.DataView(data);
chartView.setColumns([4, 5]);
// Create the chart.
// Note that DOM element ID must be consistent with the corresponding
// ID in the HTML body section.
var myChart = new google.visualization.ColumnChart(document.getElementById('chart1_div'));
myChart.draw(chartView);
//--------------------------------------------------------------------------
// Draw a chart #2
//--------------------------------------------------------------------------
// Create the chart #2.
// Note that DOM element ID must be consistent with the corresponding
// ID in the HTML body section.
// We'll show home game attendance, runs scored, runs allowed, wins, loses, and NO# games behind .
var chartView2 = new google.visualization.DataView(data);
chartView2.setColumns([0, 7, 8, 9]);
// Create the chart #2.
// Note that DOM element ID must be consistent with the
corresponding
// ID in the HTML body section.
var myChart2 = new google.visualization.
ColumnChart(document.getElementById('chart2_div'));
myChart2.draw(chartView2);
}
</script>
</head>
<body>
<h2>Project 1: Spreadsheet display working</h2>
<!--Div that will hold the pie chart-->
<div id="table_div"></div>
<div id="chart1_div"></div>
<div id="chart2_div"></div>
</body>
</html>
PROBLEM CODE
<html>
<head>
<title>Project 1: Spreadsheet display working</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 piechart package.
google.load('visualization', '1.0', { 'packages': ['controls', 'map',
'table', 'corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(sendQuery);
// Construct and send a query to Google Spreadsheet
function sendQuery() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1Ixlanep_0VfZtnk4rzS0jb1owTIbIRWAdGr9mp7
OMIc/gviz/tq?tq=');
//query.setQuery('SELECT E, F, H, I');
query.send(drawChart);
}
// The query callback function
function drawChart(response) {
// Always check for error.
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Sort by the first column.
data.sort([{column: 0 }]);
//------------------------------------------------------------------
// Draw a table
//------------------------------------------------------------------
// We'll show the whole table. So there is no need to set call
setColumns().
var tableView = new google.visualization.DataView(data);
// Create an empty ChartWrapper and set its properties
var chart1 = new google.visualization.ChartWrapper();
chart1.setChartType('Table');
chart1.setContainerId('table_div');
// To set a DataView for the ChartWrapper, use
DataView.toJSON()function.
// There is a no need to set DataTable for the ChartWrapper.
chart1.setView(tableView.toJSON());
//------------------------------------------------------------------
// Draw a chart #1
//------------------------------------------------------------------
// Create the chart #1.
// Note that DOM element ID must be consistent with the
corresponding
// ID in the HTML body section.
// We'll show home game attendance, runs scored, runs allowed, wins,
loses, and NO# games behind .
var chartView = new google.visualization.DataView(data);
chartView.setColumns([4, 5]);
var chart2 = new google.visualization.ChartWrapper();
chart2.setChartType('ColumnChart');
chart2.setContainerId('chart1_div');
chart2.setView(chartView.toJSON());
// Create the chart.
// Note that DOM element ID must be consistent with the
corresponding
// ID in the HTML body section.
//var myChart = new
google.visualization.ColumnChart(document.getElementById('chart1_div'));
//myChart.draw(chartView);
//------------------------------------------------------------------
// Draw a chart #2
//------------------------------------------------------------------
// Create the chart #2.
// Note that DOM element ID must be consistent with the
corresponding
// ID in the HTML body section.
// We'll show home game attendance, runs scored, runs allowed, wins,
loses, and NO# games behind .
var chartView2 = new google.visualization.DataView(data);
chartView2.setColumns([0, 7, 8, 9]);
var chart3 = new google.visualization.ChartWrapper();
chart3.setChartType('ColumnChart');
chart3.setContainerId('chart2_div');
chart3.setView(chartView2.toJSON());
// Create the chart #2.
// Note that DOM element ID must be consistent with the
corresponding
// ID in the HTML body section.
//var myChart2 = new
google.visualization.ColumnChart(document.getElementById('chart2_div'));
//myChart2.draw(chartView2);
// Create and draw the dashboard
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Bind the filters to charts. These filters and charts now become
part of this dashboard.
dashboard.bind([chart1, chart2, chart3]);
// Draw all the charts and filters in this dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<h2>Project 1: Spreadsheet display working</h2>
<div id="dashboard_div">
<table>
<tr>
<td>
<!--Div that will hold the pie chart-->
<div id="table_div" style="height: 200px; width: 1000px;
border-style: groove;">
</div>
<br />
<div id="chart1_div" style="height: 200px; width: 1000px;
border-style: groove;">
</div>
<br />
<div id="chart2_div" style="height: 200px; width: 1000px;
border-style: groove;">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>