快捷搜索:

gchart:基于google图表API的jquery组件全攻略:1、入

gchart是基于google图表API的jquery组件。应用gchart 可以方便地天生强大年夜的各类图表和报表。基于google图表接口的gchart,有着简单、方便、强大年夜、够用、好用的特征。《gchart:基于 jquery的google图表接口组件全攻略》系列文章将带你走入gchart的报表天下。

先解释一下这个拗口的标题

google图表API

google图表API是 google供给的一个可以天生各类图表的api接口。根据各类您的需求,Google 图表 API 会返回一幅 PNG 款式的图片来相应一个网址。Google 图表 API 可以天生多种类型的图片,包括折线图、条形图和饼图。您可以为每种图片类型指定属性,例如大年夜小、颜色和标签。

上面是抄Google图表API官方网站的,按拍照符中国人听力习气的话说便是:google图表API是一特屌的接口,把你想要的报表需求往里面一塞,他就能给你一PNG图片,这个PNG图片便是你想要的报表!

基于jquery的XX组件

说白了便是:一哥们,写了一个JavaScript组件,然则这哥们有点懒,他不想获得一个元素还要 document.getElementById,于是就应用了一个JavaScript根基库——jquery。他就不用劳神辛勤的去办理那些什么浏览器兼容性等紊乱无章的JavaScript问题,而把主要精力放在他要实现的组件逻辑上了。当然,应用jquery还有其他的一大年夜把好处。总之,你要想应用这哥们的JavaScript组件,那就的先引入jquery这个JavaScript根基库。

gchart

上面说到,一个哥们想写一个JavaScript组件,而这个组件的功能便是为了更简单、方便的调用google的图表API,来天生各类图表。

总之gchart这个玩意,前面用的是别人jquery的,后面用的是别人google图表API的,合计这哥们便是一拉皮条的。

不过,你也别鄙视这个拉皮条的哥们,能划复杂为简单、划腐败为神奇,也算是一人才。而咱的这个《gchart:基于jquery的google图表接口组件全攻略》系列文章,便是解读这个“皮条哥”的。

先看看gchart能做什么

下面是一些图片,来阐明gchart可以做什么——

gchart天生的折线图

gchart天生的柱状图

gchart天生的2D饼图

gchart天生的3D饼图

gchart天生的雷达

gchart天生的舆图图表

gchart还可以天生一些看上去紊乱无章的,貌似通俗环境下用不到的图表——

gchart天生的漫衍图

gchart天生的维恩图

gchart天生的速率仪表盘图

gchart天生的二维条形码

恩,反正你能想到的图表,基础上应用gchart都可以天生。恩~说是gchart天生的彷佛不太恰当,准确的说,应该是:应用gchart操作google图表API天生。着实终极照样人家google图表API天生的。

应用gchart的前期筹备

经由过程这拗口的标题,我们就能大年夜致的懂得应用gchart必要的器械。

google图表API。这个完全不用担心。这个已经被gchart搞定了。它会自动链接google的图表api办事器调用。以是,我们不用做任何工作。当然,要包管你应用gchart的电脑能上网才行。

jquery.js。这个不用说了吧。满大年夜街都是,随便找个过来就可以了。1.2.3版本以上即可。

gchart脚本库。不用担心,我这就供给下载: jquery.gchart.js(51k,这个是没有颠末压缩和加密的),jquery.gchart.pack.js(14k,这个是颠末压缩打包的)。

好,让我们做一个小例子吧

正如你看到的,gchart看上去是个宏大年夜的器械,这也是为什么,我写的是个系列文章,而不是一篇文章的缘故原由。当文章过长的时刻,大年夜家会很不爱好涉猎,以是,本篇,只列一个小的例子,也不会做过多的解释,更具体的解释,会放鄙人一篇文章中进行。

一个简单的gchart示例

提示:可以先在文本框内,根据必要改动代码后再运行

您可能还会对下面的文章感兴趣: