HTML+JS加载Google Visualization折线图报google未定义报错求助

安全阿岳

2026-10-28

报错根因

Uncaught ReferenceError: google is not defined由两个核心问题触发：

代码中引用的https://www.google.com/jsapi是已废弃的旧版Google Charts加载入口，该入口已停止官方维护，长期存在脚本拉取失败、执行中断的兼容性问题，会导致全局google对象无法正常初始化。
本地运行时若网络环境无法正常连通Google Charts的静态资源域名，脚本会直接加载失败，同样会触发该未定义报错。

修复方案

替换失效的旧版加载脚本：移除页面中原有的旧jsapi引用，替换为当前兼容的新版加载地址，同时适配新版的API调用逻辑，从根源上解决加载失败问题。
调整脚本执行顺序：确保Google Charts的加载脚本位于自定义业务脚本之前，避免业务代码先于图表库执行，出现对象未定义的时序问题。
排查网络适配问题：确认本地运行环境可以正常拉取图表库的静态资源，排除脚本被拦截、请求超时导致加载中断的问题。

修复后可直接运行的代码

<html>
<head>
<script type="text/javascript" src="gline.js"></script>
<!-- 替换旧的失效jsapi脚本地址 -->
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
  // 适配新版图表库的加载逻辑
  google.charts.load('current', {packages:["corechart"]});
  google.charts.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>