0411-39943997

客服中心

電話咨詢：0411-39943997

手機(jī)咨詢:15840979770
手機(jī)咨詢:13889672791

網(wǎng)絡(luò)營銷 >更多

網(wǎng)站優(yōu)化

網(wǎng)站SEO優(yōu)化

百度竟價(jià)

google竟價(jià)

SEO優(yōu)化報(bào)價(jià)

您現(xiàn)在的位置：首頁 > 新聞中心 > 常見問題

基于谷歌圖表API的jquery組件詳解

作者：billionnet 發(fā)布于:2012/3/19 18:13:18 點(diǎn)擊量：

gchart：基于谷歌google圖表API的jquery組件全攻略——入門

gchart是基于谷歌google圖表API的jquery組件。使用gchart可以方便地生成強(qiáng)大的各種圖表和報(bào)表。基于google圖表接口的gchart，有著簡單、方便、強(qiáng)大、夠用、好用的特點(diǎn)?！秅chart：基于jquery的google圖表接口組件全攻略》系列文章將帶你走入gchart的報(bào)表世界。

先解釋一下這個(gè)拗口的標(biāo)題

谷歌google圖表API：

谷歌google圖表API是谷歌google提供的一個(gè)可以生成各種圖表的api接口。根據(jù)各種您的需求，Google 圖表 API 會(huì)返回一幅 PNG 格式的圖片來響應(yīng)一個(gè)網(wǎng)址。Google 圖表 API 可以生成多種類型的圖片，包括折線圖、條形圖和餅圖。您可以為每種圖片類型指定屬性，例如大小、顏色和標(biāo)簽。

上面是抄Google圖表API官方網(wǎng)站的，按照符合中國人聽力習(xí)慣的話說就是：google圖表API是一特屌的接口，把你想要的報(bào)表需求往里面一塞，他就能給你一PNG圖片，這個(gè)PNG圖片就是你想要的報(bào)表！

基于jquery的XX組件：

說白了就是：一哥們，寫了一個(gè)JavaScript組件，但是這哥們有點(diǎn)懶，他不想得到一個(gè)元素還要document.getElementById，于是就使用了一個(gè)JavaScript基礎(chǔ)庫——jquery。他就不用費(fèi)心費(fèi)力的去解決那些什么瀏覽器兼容性等亂七八糟的JavaScript問題，而把主要精力放在他要實(shí)現(xiàn)的組件邏輯上了。當(dāng)然，使用jquery還有其他的一大把好處。總之，你要想使用這哥們的JavaScript組件，那就的先引入jquery這個(gè)JavaScript基礎(chǔ)庫。

gchart：

上面說到，一個(gè)哥們想寫一個(gè)JavaScript組件，而這個(gè)組件的功能就是為了更簡單、方便的調(diào)用google的圖表API，來生成各種圖表。

總之 gchart 這個(gè)玩意，前面用的是別人jquery的，后面用的是別人google圖表API的。不過，你也別小看它，能劃繁雜為簡單、劃腐朽為神奇，也算是一人才。而咱的這個(gè)《gchart：基于jquery的google圖表接口組件全攻略》系列文章，就是解讀它的。

先看看gchart能做什么

下面是一些圖片，來說明gchart可以做什么：

gchart生成的折線圖

gchart生成的柱狀圖

gchart生成的2D餅圖

gchart生成的3D餅圖

gchart生成的雷達(dá)

gchart生成的地圖圖表

gchart還可以生成一些看上去亂七八糟的，貌似普通情況下用不到的圖表：

gchart生成的散布圖

gchart生成的維恩圖

gchart生成的速度儀表盤圖

gchart生成的二維條形碼

恩，反正你能想到的圖表，基本上使用gchart都可以生成。恩～說是gchart生成的似乎不太恰當(dāng)，準(zhǔn)確的說，應(yīng)該是：使用gchart操作google圖表API生成。其實(shí)最終還是人家google圖表API生成的。

使用gchart的前期準(zhǔn)備：

通過這拗口的標(biāo)題，我們就能大致的了解使用gchart需要的東西。

google圖表API。這個(gè)完全不用擔(dān)心。這個(gè)已經(jīng)被gchart搞定了。它會(huì)自動(dòng)鏈接google的圖表api服務(wù)器調(diào)用。所以，我們不用做任何事情。當(dāng)然，要保證你使用gchart的電腦能上網(wǎng)才行。

jquery.js。這個(gè)不用說了吧。滿大街都是，隨便找個(gè)過來就可以了。1.2.3版本以上即可。

gchart腳本庫。不用擔(dān)心，我這就提供下載：jquery.gchart.js(51k,這個(gè)是沒有經(jīng)過壓縮和加密的)，jquery.gchart.pack.js(14k,這個(gè)是經(jīng)過壓縮打包的)。

好，讓我們做一個(gè)小例子吧

正如你看到的，gchart看上去是個(gè)龐大的東西，這也是為什么，我寫的是個(gè)系列文章，而不是一篇文章的原因。當(dāng)文章過長的時(shí)候，大家會(huì)很不喜歡閱讀，所以，本篇，只列一個(gè)小的例子，也不會(huì)做過多的解釋，更詳細(xì)的解釋，會(huì)放在下一篇文章中進(jìn)行。

運(yùn)行代碼框
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><meta name="Keywords" content="YES!B/S!,web標(biāo)準(zhǔn),楊正祎,博客園,實(shí)例代碼" /><br /><meta name="Description" content="這是一個(gè)簡單YES!B/S!文章示例頁面,來自楊正祎的博客,http://justinyoung.cnblogs.com/" /><br /><title>YES!B/S!文章示例頁面</title><br /><title>gchart簡單示例</title><br /><style type="text/css"><br />#basicGChart { width: 450px; height: 300px }<br /></style><br /><script type="text/javascript" src="http://downloads.cnblogs.com/justinyoung/gchart/jquery.js"></script><br /><script type="text/javascript" src="http://downloads.cnblogs.com/justinyoung/gchart/jquery.gchart.js"></script><br /><script type="text/javascript"><br />$(function () {<br /> //下載量<br /> var array1=[15, 13, 12, 33,28, 21, 30, 31, 33, 25, 22, 18];<br /> //日期數(shù)組<br /> var array2=[""""1月"""",""""2月"""",""""3月"""",""""4月"""",""""5月"""",""""6月"""",""""7月"""",""""8月"""",""""9月"""",""""10月"""",""""11月"""",""""12月""""];<br /> $(""""#basicGChart"""").gchart({<br /> type: """"line"""",//圖表類型<br /> title: """"2009年阿一電影下載量折線圖"""", //圖表標(biāo)題<br /> series: [<br /> $.gchart.series(array1,""""red"""")//圖表數(shù)據(jù)<br /> ],<br /> axes: [//圖表坐標(biāo)軸<br /> $.gchart.axis(""""left"""", 0, 100,""""blue""""),<br /> $.gchart.axis(""""bottom"""",array2,""""008000"""")<br /> ],<br /> legend: """"top""""});<br />});<br /></script><br /></head><br /><body><br /><h2>一個(gè)簡單的gchart示例</h2><br /><div class="3p5rr3ld9r" id="basicGChart"><br /></div><br /></body><br /></html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

本示例網(wǎng)址：
http://downloads.cnblogs.com/justinyoung/gchart/articleExample001.html
打包下載地址如下：gchart示例001

生成的圖表見下圖：

一個(gè)簡單的gchart示例

本篇僅僅是個(gè)引子，詳細(xì)的解釋和說明，將在下篇文章中繼續(xù)，敬請(qǐng)期待哦。

本文地址：http://www.zyhzmj.com/c/20123903.html

分享到：

【刷新頁面】【加入收藏】【打印此文】【關(guān)閉窗口】

上一篇：主流手機(jī)瀏覽器HTML5跑分完全調(diào)查表
下一篇：HTML代碼的優(yōu)化雜記

Copyright@ 2011-2016 版權(quán)所有：大連千億科技有限公司遼ICP備11013762-3號(hào) google網(wǎng)站地圖百度網(wǎng)站地圖網(wǎng)站地圖

公司地址：大連市沙河口區(qū)中山路692號(hào)辰熙星海國際2317 客服電話：0411-39943997 QQ：2088827823 37482752

法律聲明：未經(jīng)許可，任何模仿本站模板、轉(zhuǎn)載本站內(nèi)容等行為者，本站保留追究其法律責(zé)任的權(quán)利！隱私權(quán)政策聲明

国内自拍在线,久久久夜色精品,欧美日韩一区三区,国产黄a三级三级三级看三级男男,aaa一级片,久久久久久久久一区二区三区,中文一区在线

基于谷歌圖表API的jquery組件詳解

作者：billionnet 發(fā)布于:2012/3/19 18:13:18 點(diǎn)擊量：