jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】

更新時間：2017年03月13日 12:18:34 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)氣泡圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制氣泡圖的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery插件HighCharts實現(xiàn)氣泡圖效果。分享給大家供大家參考，具體如下：

1、實例代碼：

<!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>

運行效果圖如下：

附：完整實例代碼點擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)3D文字特效的方法
這篇文章主要介紹了jQuery實現(xiàn)3D文字特效的方法,通過鼠標(biāo)與css樣式來實現(xiàn)文字特效的技巧,需要的朋友可以參考下
2015-03-03
jquery處理checkbox（復(fù)選框）是否被選中實例代碼
這篇文章主要介紹了jquery處理checkbox（復(fù)選框）是否被選中實例代碼的相關(guān)資料,需要的朋友可以參考下
2017-06-06
jQuery 屬性選擇器element[herf*=''value'']使用示例
一個針對jQuery屬性選擇器的小例子,增加對jQUery屬性選擇器的理解，感興趣的朋友可以參考下
2013-10-10
S2SH整合JQuery+Ajax實現(xiàn)登錄驗證功能實現(xiàn)代碼
登錄驗證,在項目開發(fā)中很常用的，尤其是這一塊非常有利于用戶體驗，感興趣的朋友可以參考下，或許對你學(xué)習(xí)登陸驗證有所幫助，好了閑話不多說了，看代碼
2013-01-01
JavaScript實現(xiàn)的彈出遮罩層特效經(jīng)典示例【基于jQuery】
這篇文章主要介紹了JavaScript實現(xiàn)的彈出遮罩層特效,結(jié)合實例形式分析了基于jQuery實現(xiàn)的頁面元素與屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下
2019-07-07
jQuery根據(jù)用戶電腦是mac還是pc加載對應(yīng)樣式的方法
這篇文章主要介紹了jQuery根據(jù)用戶電腦是mac還是pc加載對應(yīng)樣式的方法,涉及jQuery針對客戶端信息的獲取及樣式的調(diào)用技巧,需要的朋友可以參考下
2015-06-06
jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見也很實用，于是本人搜集整理了一些，需要了解的朋友可以詳細參考下
2012-12-12
jQuery文字輪播特效
本文給大家分享的是jQuery制作文字輪播的特效，非常的實用，屬于作者原創(chuàng)代碼，分享給大家
2017-02-02
jquery實現(xiàn)表單驗證并阻止非法提交
本文給大家分享的是使用jquery實現(xiàn)表單驗證并阻止非法提交的代碼，思路非常不錯，這里推薦給小伙伴們參考下。
2015-07-07
jQuery用noConflict代替$的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query用noConflict代替$的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04