它只是一個簡單的腳本專案，旨在根據電子表格中的資料創建餅圖。當我在 HTML 檔案中構建 DataTable 時，我讓它作業，但我嘗試通過查詢調整它，以便從電子表格中提取資料并使儀表板隨著電子表格的更改而動態化。
然而，每當我部署它時，它只會顯示為一個空白螢屏。任何幫助/想法表示贊賞！我最終會得到它...
HTML 檔案代碼：
<html>
<head>
<!--Load the AJAX API-->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function initialize() {
var opts = {sendMethod: 'auto'};
// 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/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
}
// Send the query with a callback function.
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' response.getMessage() ' ' response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
//enter alert on user screen when clicking on section of chart
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
JS檔案代碼：
function doGet() {
return HtmlService.createHtmlOutputFromFile('webappchartv2');
}
uj5u.com熱心網友回復：
- 丟失的
query.send(handleQueryResponse); setOnLoadCallback設定不正確
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var opts = {sendMethod: 'auto'};
// 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/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
query.send(handleQueryResponse);
}
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361449.html