google Charts 本地化部署

之前做过一个数据分析工具,需求之一是要根据统计出的数据生成图表,考虑了Raphael,Bootstrap Chart.js 和google Charts 三个JS库,最终选定google Charts,原因是Raphel学习成本太高而Bootsrap Chart.js的功能上明显无法满足需求.google Charts部署的方式很简单.

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

问题来了,google Charts需要通过访问google API导入依赖,但是国内访问谷歌服务器稳定性不敢恭维,于是决定把google Charts直接部署到本地。 Google没有提供直接部署在本地的方案,不过毕竟是JS,可以直接从浏览器中获取。不过需要稍微研究了一下google Charts加载依赖的工作方式。

打开控制台,发现Google Charts首先加载了一个叫googleapi.js的文件 : chrome console googleapi.js根据生产代码中需要载入的库,去请求google服务器上对应的库到本地。
原理看清楚了,直接把googleapi下载到本地,从本地引入,修改代码中服务器配置部分的代码,将服务器配置换成本机地址。

if (!window['google']['loader']) {
window['google']['loader'] = {};
google.loader.ServiceBase = 'https://www.google.com/uds';
google.loader.GoogleApisBase = 'https://ajax.googleapis.com/ajax';
google.loader.ApiKey = 'notsupplied';
google.loader.KeyVerified = true;
google.loader.LoadFailure = false;
google.loader.Secure = true;
google.loader.GoogleLocale = 'www.google.com';
google.loader.ClientLocation = null;
google.loader.AdditionalParams = '';

在文件最后添加载入google charts库的代码,并在html中引入本地的googleapi.js文件:

<script src="__JS__/google/jsapi.js"></script>

大功告成,现在不需要从google服务器请求js文件了,飞一般的速度!

Mysql数据分析工具 演示站 : http://mysqldata.chxj.name

Show Comments