4

私の問題は、Googleチャートのjsコードを外部のjavascriptファイルに入れるときです。ページの読み込みを開始し、何も表示しません。インライン JavaScript の場合、正常に動作します。

以下は私のHTMLコード「google barchart.html」です

 <html>
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
       <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript" src="https://www.google.com/jsapi"></script>
       <script type="text/javascript" src="test.js"></script>
       <script type="text/javascript"></script>
    </head>
    <body>
      <input type="button" id="btn" value="Show Graph" />
      <div id="chart_div" style="width: 441px; height: 300px;"></div>
    </body>
 </html>

これは私のjsファイル「test.js」です

 $(document).ready(function()  {    $('#btn').click(function()      {   //alert("hi");
       google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['', 'Your Restaurant', 'Other Restaurants'],
          ['Question1',  5, 4],
          ['Question2',  4, 5],
          ['Question3',  3, 2],
          ['Question4',  5, 1]
        ]);

        var options = {
          //title: 'Company Performance',
          hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
          vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }     }); });

*注: このコードがどの js 関数にも含まれていない場合、外部 js でも正常に動作します。しかし、これをJavascript関数で使用したいです。

事前にt​​hnx。

モアズ

4

1 に答える 1

6

私はあなたのコードを、あなたが使用できる 2 つの実用的なソリューションに修正しました (IE、Chrome、および Mozilla での動作をテスト済み)。

  1. JavaScript がインデックス ページとともに読み込まれます
  2. ボタンのクリック後に JavaScript が読み込まれる

.

解決策 1: JavaScript がインデックス ページを読み込む

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>

test.js

google.load('visualization', '1', {'packages':['corechart']});

$(document).ready(function() {    
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
           ['', 'Your Restaurant', 'Other Restaurants'],
           ['Question1',  5, 4],
           ['Question2',  4, 5],
           ['Question3',  3, 2],
           ['Question4',  5, 1]
           ]);

var options = {
    title: 'Company Performance',
    hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
    vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
    tooltip: {trigger: 'hover'}};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});

解決策 2: ボタンのクリック後に JavaScript が読み込まれる

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});

function loadjsfile(filename, filetype) 
     {
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", filename);
  document.getElementsByTagName("head")[0].appendChild(fileref)
     }
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>

test2.js

$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
           ['', 'Your Restaurant', 'Other Restaurants'],
           ['Question1',  5, 4],
           ['Question2',  4, 5],
           ['Question3',  3, 2],
           ['Question4',  5, 1]
           ]);

var options = {
    title: 'Company Performance',
    hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
    vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
    tooltip:{trigger: 'hover'}};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});
于 2012-11-11T17:11:52.630 に答える