AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

51自学网 http://www.wanshiok.com
jQuery,插件,HighCharts,2D,金字塔图

本文实例讲述了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: '人数',  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相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。


jQuery,插件,HighCharts,2D,金字塔图  
上一篇:使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例  下一篇:微信小程序 合法域名校验出错详解及解决办法