4

我的问题是，当我将任何谷歌图表的 js 代码放在外部 javascript 文件中时。它开始加载页面并且不显示任何内容。如果是内联 javascripts，它的工作正常。

以下是我的 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 函数中使用它。

提前谢谢。

莫阿兹

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>

测试.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 回答