Html- Google 未定义

Question

我正在尝试使用 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,12,10,13,14,12,10,9],
['2006-01',114,32,37,33,32,28,27,14,23,21],
['2006-02',16,6,1,3,3,3,3,12,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

请帮我解决这个错误。

Answer 1

在函数中包装您的 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- Google 未定义

Html- Google is not defined

javascript

html

timeline