======================================================
注：本文源代碼點此下載下傳======================================================
highcharts:高互動性的javascript圖表類庫
一、highcharts簡介：
二、highcharts圖表預覽
1、直線圖
2、曲線圖
3、散狀圖
4、區域圖
5、區域曲線圖
6、柱狀圖
7、餅狀圖
三、調用方式
1、效果
2、調用代碼
3、代碼說明
四、總結
一、highcharts簡介:
highcharts是一個制作圖表的javascript類庫,可以制作的圖表有:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散狀圖等等。主要特性:
1、 提示功能:滑鼠移動到圖表的某一點上有提示資訊
2、 放大功能:選中圖表部分放大,近距離觀察圖表
3、 對個人使用者完全免費,這一點很重要的
4、 相容性:相容當今所有的浏覽器,包括iphone、ie和火狐等等
5、 跨語言:不管是php、asp.net還是java都可以使用,它隻需要三個檔案:一個是highcharts的核心檔案highcharts.js,還有a canvas emulator for ie和jquery類庫或者mootools類庫
6、 支援大部分的圖表類型:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖
7、 易用性:無需要特殊的開發技能,隻需要設定一下選項就可以制作适合自己的圖表
8、 時間軸:可以精确到毫秒
9、 ajax支援: 使用數組接受ajax傳值
二、highcharts圖表預覽
1、直線圖
2、曲線圖
3、散狀圖
4、區域圖
5、區域曲線圖
6、柱狀圖
7、餅狀圖
更多demo請參考官方網站:http://www.highcharts.com/demo/
三、調用方式
以ajax傳回資料到chat資料組為例,
1、效果
2、調用代碼
var chart = new highcharts.chart({
chart: {
renderto: 'container',
defaultseriestype: 'spline'
},
title: {
text: 'monthly average temperature in tokyo'
},
subtitle: {
text: 'source: worldclimate.com'
},
xaxis: {
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
title: {
text: 'month'
}
},
yaxis: {
title: {
text: 'temperature (°c)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+ this.series.name +'
'+
this.x +': '+ this.y +'°c';
}
},
series: [{
name: 'tokyo',
dataurl: 'tokyo.json'
}]
});
3、代碼說明
defaultseriestype:圖表類别,可取值有:line、spline、area、areaspline、bar、column等等
title:最頂端的标題
subtitle:最頂端的子标題
xaxis:x軸,資料以數組的形式組裝
yaxis:y軸,資料以數組的形式組裝
tooltip:提示資訊
series:ajax獲得資料放到資料裡面
四、總結
此chats js類庫,使用比較簡單,而且樣式多種,效果絢麗。唯一的缺陷是,個人免費的生成的chat應該會有官方的網址。 不過也是有辦法處理的,對生成的chat進行cut,應該可以把官方的網址去掉。
其他連結
<推薦>35個優秀的電子商務網站界面
表單元素：40個css/js風格和功能技術處理
推薦jquery 40個漂亮的導航菜單設計
版權
作者:靈動生活
出處:http://www.cnblogs.com/ywqu
如果你認為此文章有用,請點選底端的【推薦】讓其他人也了解此文章,
你也可以加我的新浪微網誌,以便實時了解我的動态:http://weibo.com/ywqu
wowo mandarin(英語教育訓練):http://www.wowomandarin.com
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。
标簽: jquery, asp.net chat 圖表, javascript圖表類庫, highcharts
綠色通道:好文要頂關注我收藏該文與我聯系
posted @ 2009-12-04 21:44 靈動生活 閱讀(7097) 評論(11)編輯 收藏
發表評論
2233209
回複 引用 檢視
#1樓 2009-12-04 22:41 夕顔
很不錯哦～感謝分享
回複 引用 檢視
#2樓 2009-12-04 23:45 riccc
今天在dzone上面看到介紹,過去看了一下,圖畫的很漂亮
回複 引用 檢視
#3樓 2009-12-05 08:30 侯壘
非常不錯。
回複 引用 檢視
#4樓 2009-12-05 09:42 深山老林
謝謝分享,太感謝了。
回複 引用 檢視
#5樓 2009-12-05 10:13 卡索
不錯的東東!
這個生成的chart中是可以把highcharts.com這個部分給幹掉的,因為這是js的東東 隻要後好分析下下就可以搞定啦!不過貌似這麼做不是很好啊!o(∩_∩)o~
這個是基于canvas來畫圖的,ie下使用vml來畫圖
回複 引用 檢視
#6樓[樓主] 2009-12-05 10:42 靈動生活
@卡索
是可以去掉的
回複 引用 檢視
#7樓 2009-12-08 15:53 icebird
credits: { enabled: false,
回複 引用 檢視
#8樓 2009-12-17 16:08 飛笑
也提供一個flash的:
http://teethgrinder.co.uk/open-flash-chart/
回複 引用 檢視
#9樓 2009-12-18 12:43 pay100
不錯的東東
回複 引用 檢視
#10樓 2011-08-30 13:31 bgrace
部落客,當資料量比較大的時候,在ie裡面就死掉了吧。不信你試試!
回複 引用 檢視
#11樓 2011-11-02 10:15 唐子慧
謝謝學習
注冊使用者登入後才能發表評論,請 登入 或 注冊,傳回部落格園首頁。
首頁博問閃存新聞園子招聘知識庫
最新it新聞:
·windows 7官方rss動态主題：《昆蟲》
·撿到iphone 4s玩自拍 icloud同步釀悲劇
·鐵道部購票網站存洩密危險 cdn服務商技術短闆是主因
·利用 mimo magictouch 打造另類的平闆電腦
·但願大嘴巴的消息再次失準
» 更多新聞...
最新知識庫文章:
·設計師的品牌意識
·如何成為“10倍效率”開發者
·快速排序（quicksort）的javascript實作
·wcf服務端運作時架構體系詳解[續篇]
·wcf服務端運作時架構體系詳解[下篇]
» 更多知識庫文章...
china-pub 2011秋季教材巡展
china-pub 計算機絕版圖書按需印刷服務
======================================================
在最後，我邀請大家參加新浪APP，就是新浪免費送大家的一個空間，支援PHP+MySql，免費二級域名，免費域名綁定 這個是我邀請的位址，您通過這個連結注冊即為我的好友，并獲贈雲豆500個，價值5元哦！短網址是http://t.cn/SXOiLh我建立的小站每天訪客已經達到2000+了，每天挂廣告賺50+元哦，呵呵，飯錢不愁了，\(^o^)/