Google Charts是谷歌推出的一款基于JavaScript的交互式图表库，它最大的优势在于使用简单、无需安装额外依赖，通过CDN加载即可在网页中绘制折线图、柱状图、饼图等多种图形。与ECharts、Chart.js等库相比，Google Charts的API设计较为直观，适合快速搭建数据展示页面。不过，CDN加载方式涉及加载器、图表包和回调函数的配合，初次使用时容易遇到加载顺序错误或图表不显示的问题。本文将以一个完整示例为主线，讲解如何通过CDN正确加载Google Charts，并分享一些实用的配置和优化技巧。
Google Charts的CDN加载机制
Google Charts并不像普通JavaScript库那样直接暴露一个全局对象，而是采用一种加载器模式。首先需要引入一个名为loader.js的脚本，这个脚本会负责后续的模块加载。官方推荐的CDN地址是https://www.gstatic.com/charts/loader.js，通常放在HTML页面的<script>标签中。引入之后，页面会获得一个全局的google.charts对象，通过调用google.charts.load方法来指定需要加载的图表包和版本。
加载器采用异步方式工作，这意味着google.charts.load调用后并不会立即完成图表库的下载。必须通过google.charts.setOnLoadCallback注册一个回调函数，当所有依赖的图表包准备就绪后，该回调才会被执行。常见的做法是先指定图表包名称，例如corechart包含柱状图、折线图、饼图等基础图表，如果需要表格或地图，还需要额外加载table或geomap等包。通过google.charts.load('current', {packages: ['corechart']})可以加载最新版本的corechart包，也可以指定具体版本号来保证代码在不同时间行为一致。
选择CDN时，官方gstatic地址在全球范围内拥有良好的分发网络，但在部分网络环境下可能出现访问缓慢的情况。此时可以使用第三方CDN，例如cdnjs或jsDelivr提供的Google Charts镜像。需要注意，第三方CDN可能不是由谷歌直接维护，版本更新可能略有延迟，但通常也能满足生产需求。引入第三方CDN时仍然使用相同的loader.js文件，后续调用方式完全一致。
绘制第一个柱状图完整示例
下面是一个完整的HTML页面，它通过官方CDN加载Google Charts并绘制一个简单的柱状图。代码中包含了<script>标签的引入顺序、图表数据准备以及绘制函数的调用。示例数据展示了某产品在不同月份的销量，读者可以将代码保存为独立的HTML文件，直接通过浏览器打开运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Charts CDN示例</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 400px;"></div>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['月份', '销量'],
['一月', 120],
['二月', 180],
['三月', 95],
['四月', 210],
['五月', 160]
]);
var options = {
title: '月度销量统计',
hAxis: {title: '月份'},
vAxis: {title: '销量'},
legend: {position: 'none'}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
</script>
</body>
</html>
这段代码的核心部分分为三步。第一步，使用google.charts.load加载corechart包。第二步，通过google.charts.setOnLoadCallback注册drawChart函数，确保图表库加载完成后才执行绘制逻辑。第三步，在drawChart中利用google.visualization.arrayToDataTable将二维数组转换为图表数据表，然后创建ColumnChart实例并调用draw方法。需要注意的是，chart_div这个容器必须提前存在于DOM中，并且最好为其设置明确的宽度和高度，否则图表可能无法正确渲染。
如果页面中同时存在多个图表，可以多次调用google.visualization下的不同图表构造函数，只需确保每个图表对应独立的DOM容器。数据表的第一行通常被识别为列标题，第一列默认作为横轴分类，第二列作为纵轴数值。如果数据顺序不同，可以通过DataTable对象的列角色来调整。
关于中文字体，Google Charts默认会根据浏览器字体渲染，如果图表中的中文显示为乱码或方块，通常与页面编码有关。在HTML头部声明<meta charset="UTF-8">可以解决大部分问题。如果仍然出现显示异常，可以在options中通过fontName指定具体字体，例如fontName: 'Microsoft YaHei'。
常见图表类型与配置技巧
Google Charts的核心图表包corechart包含了柱状图、折线图、饼图、面积图、散点图等多种类型，它们对应的构造函数分别是ColumnChart、LineChart、PieChart、AreaChart和ScatterChart。使用时只需将new google.visualization.ColumnChart中的类名替换为其他图表类名，同时保持数据表和配置对象不变，即可快速切换图表类型。例如，将ColumnChart改为PieChart后，同样的数据会以饼图形式呈现。
配置对象options用于控制图表外观，常见属性包括title、width、height、colors、legend等。其中width和height可以省略，如果省略则默认使用容器尺寸。对于响应式布局，建议将容器宽度设置为百分比，图表会自动跟随容器伸缩。如果需要强制图表在窗口大小改变时重绘，可以监听window的resize事件，在事件处理函数中重新调用chart.draw方法。
动态更新数据也是常见需求。Google Charts的DataTable对象支持addRows、removeRows、setValue等方法，可以在不重新创建图表的情况下修改数据。例如，可以初始化一个空数据表，通过定时器每秒追加一行新数据，然后再次调用draw方法。这种方式适合实时监控类场景，但要注意控制更新频率，避免过多重绘导致页面卡顿。
另一个实用技巧是使用DataView对数据进行过滤和排序。当原始数据量较大时，可以先创建DataTable，再基于它创建DataView，通过setRows或setColumns只展示需要的部分。这样修改视图不会影响原始数据，多个图表可以共享同一份数据源，提高性能和代码可维护性。
常见问题与优化建议
在使用CDN加载Google Charts的过程中，最常见的错误是google is not defined。这通常是因为loader.js尚未加载完成，或者加载顺序不正确。解决方法是将google.charts.load和google.charts.setOnLoadCallback的调用放在loader.js的<script>标签之后，并确保两个调用出现在同一个<script>块中。如果使用模块化开发，还需要注意loader.js不是ES模块，不能使用import方式引入，只能通过全局脚本加载。
另一个容易被忽略的问题是图表渲染失败但没有报错。这种情况往往是因为容器在drawChart执行时还不可见，例如容器被CSS设置为display: none，或者父元素高度为0。Google Charts在隐藏容器中绘制时可能产生错误的尺寸。解决方法是在绘制前确保容器可见，或者在容器显示后再调用draw方法。如果页面使用单页应用框架，建议在组件挂载完成的生命周期钩子中执行图表初始化。
对于需要离线使用的场景，CDN加载方式会受限于网络连接。此时可以考虑将loader.js以及所需的图表包文件下载到本地，通过相对路径引入。Google Charts的加载器支持本地化部署，只需将src指向本地文件，并在google.charts.load中指定相同的包名即可。不过本地化部署需要手动处理依赖文件，因为图表包内部可能还会请求其他资源，完整下载所有依赖需要一定技巧。
性能方面，如果页面中包含大量图表，建议合并加载请求，避免为每个图表单独调用google.charts.load。通常一个页面只需要加载一次corechart包，然后创建多个图表实例。同时，及时销毁不再使用的图表对象也有助于释放内存。Google Charts没有提供显式的销毁方法，但可以通过将图表变量置为null，并清空容器DOM内容来协助垃圾回收。
CDNGoogle Charts谷歌图表修改时间：2026-08-26 20:51:38