Question

我的问题是，当我将任何谷歌图表的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函数中使用它。

Thnx提前。

Moaz

Answer 1

我将您的代码修复为您可能使用的2个可用解决方案（已通过IE，Chrome和Mozilla测试）。

JavaScript加载索引页
按钮点击后加载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)
});

谷歌图表外部Javascript问题

1 个答案: