2015-01-14 21 views
0

這是我的html代碼。它包含一個div &一個外部JavaScript文件。如果我使用這個外部js文件作爲內部,它完美繪製餅圖作爲每個數據,但是當我用它作爲外部js文件時,它什麼也不顯示。Google可視化繪製圖表不適用於外部Java腳本文件

代碼的.html

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="externalscript.js"> </script> 
</head> <body> 
<div id="piechart" style="width: 900px; height: 500px;"></div> 
</body></html> 

externalscript.js

google.load("visualization", "1", {packages:["corechart"]}); 
    var dataArray =[['Task', 'Hours per Day']]; 
    var arr1=['Work','Eat','Commute','Watch TV','Sleep']; 
    var arr2=[11,2,2,2,7]; (var n=0; n < arr2.length; n++) { 
    dataArray.push([arr1[n], parseInt(arr2[n])]); 
    } 
    var data = new google.visualization.arrayToDataTable(dataArray); 
    var options = { 
     title: 'My Daily Activities' 
    }; 
    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 
+0

你不包括externalscript.js ... –

+0

現在我編輯。請參閱... – Vji

回答

1

你需要這個。

google.setOnLoadCallback(drawData); 

google.load("visualization", "1", {packages:["corechart"]}); 
 
function drawData(){ 
 
    var dataArray =[['Task', 'Hours per Day']]; 
 
    var arr1=['Work','Eat','Commute','Watch TV','Sleep']; 
 
    var arr2=[11,2,2,2,7]; 
 
    for(var n=0; n < arr2.length; n++) { 
 
    dataArray.push([arr1[n], parseInt(arr2[n])]); 
 
    } 
 
    var data = new google.visualization.arrayToDataTable(dataArray); 
 
    var options = { 
 
     title: 'My Daily Activities' 
 
    }; 
 
    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
 
    chart.draw(data, options); 
 
} 
 
google.setOnLoadCallback(drawData);
<html> 
 
<head> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
</head> <body> 
 
<div id="piechart" style="width: 900px; height: 500px;"></div> 
 
</body></html>

+0

謝謝你...它的工作!你節省了我的時間... – Vji

相關問題