Html-Google 未定义

问题描述

我正在尝试使用 HTML 和 JAVASCRIPT 在时间线上可视化一些数据。我的 Javascript 看起来像

gline = [ ['Month','umich.edu','indiana.edu','ucdavis.edu','berkeley.edu','ufp.pt','columbia.edu','uct.ac.za','mac.com','gmail.com','virginia.edu'],['2005-12',57,12,11,10,13,14,9],['2006-01',114,32,37,33,28,27,23,21],['2006-02',16,6,1,3,4,5]
];

和Html看起来像

<html>
<head>
<script type="text/javascript" src="gline.js"></script>
<script src="https://www.google.com/jsapi"   type="text/javascript"></script>
<script type="text/javascript">

  google.load("visualization","1",{packages:["corechart"]});
  google.setonLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable( gline );
     var options = {
      title: 'Sakai Developer Email Participation by Organization',chartArea: {left:'10%',top:'10%',width: '65%',height: '65%'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data,options);
  }
</script>
</head>
<body>
<div id="chart_div" style="width: 1300px; height: 600px;"></div>
</body>
</html>

然后当我运行此 HTML 代码时，出现此错误

Uncaught ReferenceError: google is not defined
24/03/2021,10:08:19 /gline.htm:11:7

请帮我解决这个错误。

解决方法

在函数中包装您的 javascript 代码
将 onload 事件处理程序添加到 jsapi 脚本标签

这应该可以解决问题。

<html>
<head>
    <script type="text/javascript" src="new.js"></script>
    <script type="text/javascript">
        function useGoogle(){
            google.load("visualization","1",{packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable( gline );
                var options = {
                    title: 'Sakai Developer Email Participation by Organization',chartArea: {left:'10%',top:'10%',width: '65%',height: '65%'}
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data,options);
              }
        }
    </script>
    <script src="https://www.google.com/jsapi"   onload="useGoogle()" type="text/javascript"></script>
</head>
<body>
    <div id="chart_div" style="width: 1300px; height: 600px;"></div>
</body>
</html>

html javascript timeline