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


Posted in Javascript onMarch 09, 2017

本文实例讲述了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插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

附:完整实例代码点击此处本站下载

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

Javascript 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 #Javascript
js实现时间轴自动排列效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 #Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 #Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 #Javascript
You might like
PHP循环结构实例讲解
2014/02/10 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python爬虫爬取网页表格数据
2018/03/07 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
大二学习计划书范文
2014/04/27 职场文书
安全负责人任命书
2014/06/06 职场文书
助学贷款贫困证明
2014/09/23 职场文书
发布会邀请函
2015/01/31 职场文书
安徽导游词
2015/02/12 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
学历证明范文
2015/06/16 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript