2017-01-17 16 views
1

Google Visualization APIを使用しているときに問題が発生しています。Google Visualization API - グラフが表示されない

私はどこが間違っているのかわかりません。ここで

は、HTMLコードは(私は重要な部分を残した)です:

<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Arquivo CSS --> 
    <link rel="stylesheet" type="text/css" href="style.css"> 


     <!-- Arquivo js externo --> 
    <script type="text/javascript" src="script.js"></script> 

    <!-- Google Visualization API --> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <!-- Arquivos Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

    <div id="line_chart"> <!— The chart should appear here!! —> </div> 

</body> 

ここscript.jsファイルです:

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Goiania', 'Jataí', 'Catalão', 'Goiás', 'Total'], 
      ['2005', 58, 11,  9,  1,  79 ], 
      ['2006', 63, 15,  14,  1,  93 ], 
      ['2007', 66, 18,  16,  1,  101 ], 
      ['2008', 66, 20,  19,  1,  106 ], 
      ['2009', 81, 21,  24,  3,  129 ], 
      ['2010', 85, 23,  25,  3,  136 ], 
      ['2011', 86, 23,  25,  3,  137 ], 
      ['2012', 86, 24,  25,  3,  138 ], 
      ['2013', 89, 24,  25,  5,  143 ], 
      ['2014', 90, 25,  26,  6,  147 ], 
      ['2015', 90, 25,  26,  7,  148 ] 
      ]); 

     var options = { 
      title: 'Testando Gráfico de Anos', 
      legend: { position: 'bottom' } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 

     chart.draw(data, options); 
     } 

が、私は私の外部の.jsファイルを呼び出してみました体の終わりには、しかし、いずれも成功しません。私はdrawChart関数をhtmlコードのどこにでも呼び出さないことを知っていますが、はscript.jsファイルで関数がonloadと呼ばれると思っています。

ありがとうございました。 :)(コードが理解しにくい場合は申し訳ありませんが、できるだけきれいに見せるようにしました)。

+1

JSコンソールに入り、関数を呼び出します。それは何をするためのものか? script.jsが404'dになっているようです – nkconnor

答えて

1

google.charts.load('current', {'packages':['corechart']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Goiania', 'Jataí', 'Catalão', 'Goiás', 'Total'], 
 
    ['2005', 58, 11,  9,  1,  79 ], 
 
    ['2006', 63, 15,  14,  1,  93 ], 
 
    ['2007', 66, 18,  16,  1,  101 ], 
 
    ['2008', 66, 20,  19,  1,  106 ], 
 
    ['2009', 81, 21,  24,  3,  129 ], 
 
    ['2010', 85, 23,  25,  3,  136 ], 
 
    ['2011', 86, 23,  25,  3,  137 ], 
 
    ['2012', 86, 24,  25,  3,  138 ], 
 
    ['2013', 89, 24,  25,  5,  143 ], 
 
    ['2014', 90, 25,  26,  6,  147 ], 
 
    ['2015', 90, 25,  26,  7,  148 ] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Testando Gráfico de Anos', 
 
    legend: { position: 'bottom' } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 
 

 
    chart.draw(data, options); 
 
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="line_chart"> <!— The chart should appear here!! —> </div>

0

ええと...ここで正常に動作するよう、私はエラーを検出しました。私は間違った場所でスクリプトを呼び出していました。私はscript.jsファイルとGoogleビジュアライゼーションapi jsを本文の末尾に付けました。今はうまくいきます。助けてくれた皆さん、ありがとうございました! ;)

関連する問題