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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
微信小程序实现录音功能
Nov 22 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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中批量替换文件名的实现代码
2011/07/20 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
js计算精度问题小结
2013/04/22 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python3字符串学习教程
2015/08/20 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
阳光体育活动方案
2014/02/16 职场文书
洗手间标语
2014/06/23 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android