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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
详解Bootstrap插件
Apr 25 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
node省市区三级数据性能测评实例分析
Nov 06 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 at(@)符号的用法简介
2009/07/11 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python发腾讯微博代码分享
2014/01/10 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
深入了解Django中间件及其方法
2019/07/26 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
Sql面试题
2013/03/20 面试题
毕业生找工作推荐信
2013/11/21 职场文书
党员承诺书怎么写
2014/05/20 职场文书
2014年消防工作总结
2014/11/21 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
Golang连接并操作MySQL
2022/04/14 MySQL