jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】
本文實(shí)例講述了jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果。分享給大家供大家參考,具體如下:
1、實(shí)例代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 氣泡圖</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/highcharts-more.js"></script> <script type="text/javascript"> $(function(){ $('#bubbleChart').highcharts({ chart: { type: 'bubble', zoomType: 'xy' }, title: { text: '氣泡圖' }, series: [{ data: [[9714,3678,7956],[1294,2374,5860],[9568,4576,1258],[4564,2587,9656],[3668,2567,7893],[2374,3699,4263],[7268,9233,8756],[2351,5669,4230],[3228,2223,3223],[5227,8126,3201]] }, { data: [[2534,1034,8347],[2566,7565,5679],[1167,5774,8776],[8776,5885,9883],[5887,3787,5788],[9078,6543,4344],[3491,3453,1457],[9547,5453,5546],[1545,6457,4458],[5554,2445,8441]] }, { data: [[4347,4457,2561],[2670,1772,4676],[6787,7666,9771],[3868,3780,6660],[5778,9768,6674],[8761,8817,3480],[8343,6450,1433],[6227,7678,7455],[6244,1562,1560],[3560,7657,8442]] }] }); }); </script> </head> <body> <div id="bubbleChart" style="width: 1200px; height: 550px; margin: 0 auto"></div> </body> </html>
運(yùn)行效果圖如下:
附:完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 基于jquery的氣泡提示效果
- JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
- jquery.cvtooltip.js 基于jquery的氣泡提示插件
- Jquery插件分享之氣泡形提示控件grumble.js
- jQuery bt氣泡實(shí)現(xiàn)懸停顯示及移開(kāi)隱藏功能的方法
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示提示框的方法
- 基于JQuery 的消息提示框效果代碼
- Jquery實(shí)現(xiàn)鼠標(biāo)移上彈出提示框、移出消失思路及代碼
- jquery懸浮提示框完整實(shí)例
- jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法分析
相關(guān)文章
jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-1120款超贊的jQuery插件 Web開(kāi)發(fā)人員必備
jQuery的易擴(kuò)展性吸引了來(lái)自全球的開(kāi)發(fā)者來(lái)共同編寫(xiě)jQuery插件。jQuery插件不僅能夠增強(qiáng)網(wǎng)站的可用性,有效地改善用戶體驗(yàn),還可以大大減少開(kāi)發(fā)時(shí)間。現(xiàn)在的jQuery插件很多,可以根據(jù)您的項(xiàng)目需要來(lái)選擇。這里為您介紹20款非常不錯(cuò)的插件。2011-02-02節(jié)點(diǎn)的插入之a(chǎn)ppend()和appendTo()的用法介紹
說(shuō)到節(jié)點(diǎn)的插入想必大家對(duì)append()和appendTo()的用法并不陌生吧,下面有個(gè)不錯(cuò)的是,希望對(duì)大家學(xué)習(xí)有所幫助2014-01-01關(guān)于兩個(gè)jQuery(js)特效沖突的bug的解決辦法
下面小編就為大家?guī)?lái)一篇關(guān)于兩個(gè)jQuery(js)特效沖突的bug的解決辦法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享 給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09jquery實(shí)現(xiàn)自定義樹(shù)形表格的方法【自定義樹(shù)形結(jié)構(gòu)table】
這篇文章主要介紹了jquery實(shí)現(xiàn)自定義樹(shù)形表格的方法,結(jié)合實(shí)例形式分析了jQuery創(chuàng)建自定義樹(shù)形結(jié)構(gòu)table的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07JQuery跨Iframe選擇實(shí)現(xiàn)代碼
JQuery跨Iframe選擇實(shí)現(xiàn),下面也通過(guò)用DOM方法與jquery方法結(jié)合的方式實(shí)現(xiàn)了,需要的朋友可以參考下。2010-08-08jquery處理json數(shù)據(jù)實(shí)例分析
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法,使用到最多的應(yīng)該是ajax與json配合使用了,下面我來(lái)給大家介紹jquery處理json數(shù)據(jù)方法。2014-06-06