Googleグラフツールバーが表示されない/実行されない

ここは新しい友達です。私はGoogle Chartsに取り組み、Googleのシートに接続しています。私はチャートが正常に動作している。次のステップは、ツールバーをその最下部に追加することです。しかし、何があってもコードを動作させることはできません。私も、コピーするだけで、テストするために空白のページにGoogle's example codeを貼り付けてみましたが、私はそれらの例を示すことさえできません。これを防止しているドキュメントに何か不足していますか？は、ここに私のコードです：Googleグラフツールバーが表示されない/実行されない

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<!-- datasheet link https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/edit?usp=sharing 
https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/pubhtml 
--> 

    <!--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 piechart package. 
     google.charts.load('current', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawAll() {drawChart(); drawToolbar();} 

     function drawChart() { 
      var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5"); 
      query.send(handleQueryResponse); 
     } 

     function handleQueryResponse(response) { 
     var data = response.getDataTable(); 
     var options = { 
      'title':'College Readiness', 
      'titleTextStyle': {fontSize: '24', color: 'teal'}, 
      //'width':800, 
      'height':600, 
      hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}}, 
      vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}}, 
      legend: {'position': 'top'}, 
      series: { 
       0: {pointsVisible: true, color: 'orange'}, 
       1: {pointsVisible: true, color: 'blue'}, 
       2: {pointsVisible: true, color: 'black'}, 
       3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'} 
      } 
      }; 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     //chart.draw(data, options); 

    function drawToolbar() { 
     var components = [ 
      {type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}, 
      {type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'} 
     ]; 

     var container = document.getElementById('toolbar_div'); 
     google.visualization.drawToolbar(container, components); 
      }; 

google.charts.setOnLoadCallback(drawAll); 
     } 
    </script> 

     </head> 

<body> 
<!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    <div id="toolbar_div"></div> 
</body> 
</html>

出典

2016-04-01 commcordinator

はカップル微調整して、ここで働いているようです。

通常、setOnLoadCallbackは1ページにつき1回のみ呼び出す必要があります。
これはおそらく問題でした。
ここでは、loadの文でcallbackを定義しました。

// Load the Visualization API and the piechart package. 
 
google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5"); 
 
    query.send(handleQueryResponse); 
 
} 
 

 
function handleQueryResponse(response) { 
 
    var data = response.getDataTable(); 
 
    var options = { 
 
    'title':'College Readiness', 
 
    'titleTextStyle': {fontSize: '24', color: 'teal'}, 
 
    //'width':800, 
 
    'height':600, 
 
    hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}}, 
 
    vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}}, 
 
    legend: {'position': 'top'}, 
 
    series: { 
 
     0: {pointsVisible: true, color: 'orange'}, 
 
     1: {pointsVisible: true, color: 'blue'}, 
 
     2: {pointsVisible: true, color: 'black'}, 
 
     3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'} 
 
    } 
 
    }; 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 

 
    var components = [ 
 
    {type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}, 
 
    {type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'} 
 
    ]; 
 

 
    var container = document.getElementById('toolbar_div'); 
 
    google.visualization.drawToolbar(container, components); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="toolbar_div"></div> 
 
<div id="chart_div"></div>

出典

2016-04-01 21:06:12 WhiteHat

ありがとうございました。これはまさに私が必要としていたものです。 – commcordinator

Googleグラフツールバーが表示されない/実行されない

答えて

関連する問題