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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Angular5.1新功能分享
Dec 21 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
微信小程序 合法域名校验出错详解及解决办法
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-redis中文文档介绍
2013/02/07 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python发送Email方法实例
2014/08/21 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python中的取模运算方法
2018/11/10 Python
Python版名片管理系统
2018/11/30 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
北承题目(C++)
2012/05/16 面试题
商场总经理岗位职责
2014/02/03 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
交通事故被告代理词
2015/05/23 职场文书
三八节祝酒词
2015/08/11 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis