jQuery插件HighCharts繪制2D金字塔圖效果示例【附demo源碼下載】

更新時間：2017年03月09日 11:19:57 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts繪制2D金字塔圖效果,結合實例形式分析了jQuery使用HighCharts插件繪制金字塔圖效果的操作步驟與相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery插件HighCharts繪制2D金字塔圖效果。分享給大家供大家參考，具體如下：

1、實例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D金字塔分布圖</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/funnel.js"></script>
<script type="text/javascript">
$(function(){
 $('#pyramidChart').highcharts({
  chart: {
  type: 'pyramid',
  marginRight: 100
  },
  title: {
  text: '金字塔分布圖',
  x: -50
  },
  plotOptions: {
  series: {
   dataLabels: {
   enabled: true,
   format: '<b>{point.name}</b> ({point.y:,.0f})',
   color: 'black',
   softConnector: true
   }
  }
  },
  legend: {
  enabled: false
  },
  series: [{
  name: '人數(shù)',
  data: [
   ['星期一',12],
   ['星期二',121],
   ['星期三',265],
   ['星期四',22131],
   ['星期五',623231],
   ['星期六',5545459],
   ['星期日',51245125]
  ]
  }]
 });
 });
</script>
</head>
<body>
 <div id="pyramidChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、運行效果圖：

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

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

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

您可能感興趣的文章:

jQuery循環(huán)滾動新聞列表示例代碼
jquery實現(xiàn)點擊公告的上一條下一條來查看滾動條，示例代碼如下，希望對大家有所幫助
2014-06-06
jQuery插件expander實現(xiàn)圖片翻轉特效
本文給大家分享的是一款基于jQuery插件expander實現(xiàn)圖片翻轉特效，一共有6種不同的圖片翻轉樣式，十分的炫酷，有需要的小伙伴可以參考下。
2015-05-05
jQuery實現(xiàn)定時隱藏對話框的方法分析
這篇文章主要介紹了jQuery實現(xiàn)定時隱藏對話框的方法,結合實例形式較為詳細的分析了jQuery定時隱藏對話框的相關函數(shù)、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2018-02-02
jQuery的圖片輪播插件PgwSlideshow使用詳解
這篇文章主要介紹了jQuery的圖片輪播插件PgwSlideshow使用詳解的相關資料,需要的朋友可以參考下
2016-08-08
jquery與google map api結合使用控件,監(jiān)聽器
關于jquery的獲取不再此處累贅，網(wǎng)上有許多關于jquery的介紹。
2010-03-03
jQuery實現(xiàn)鼠標滑過預覽圖片大圖效果的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過預覽圖片大圖效果的方法,涉及jQuery鼠標事件響應及頁面元素屬性動態(tài)操作相關技巧,需要的朋友可以參考下
2017-04-04
jquery蒙版控件實現(xiàn)代碼
jquery蒙版控件實現(xiàn)代碼，學習jquery的朋友可以參考下。
2010-12-12
基于jquery實現(xiàn)的仿優(yōu)酷圖片輪播特效代碼
這篇文章主要為大家介紹了基于jquery實現(xiàn)的仿優(yōu)酷圖片輪播特效代碼，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery實現(xiàn)HTML元素隱藏和顯示
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
在jquery中combobox多選的不兼容問題總結
最近在IE10中開發(fā)jquery，關于jquery中combobox多選不能兼容的問題，進行一些總結，感興趣的朋友可以了解下
2013-12-12