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

更新时间：2017年03月09日 11:19:57 作者：翱翔天地

这篇文章主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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 入门讲解1
jquery的优点比较多，大家可以学习下，网上好多效果都是用jquery实现的。
2009-04-04
jQuery实现选项卡功能（两种方法）
本文主要介绍了jQuery两种方法写选项卡的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
jQuery实现表格冻结顶栏效果
昨天晚上公司遇到个小需求，就是实现类似表格冻结顶栏的效果。这篇文章主要介绍了jQuery实现表格冻结顶栏效果 ,需要的朋友可以参考下
2017-08-08
jquery插件开发方法(初学者)
现在jquery是比较流行的组件了，大家可以通过扩展插件的方法自定义功能，大家可以参考下面的方法制作自己的插件
2012-02-02
jQuery实现数秒后自动提交form的方法
这篇文章主要介绍了jQuery实现数秒后自动提交form的方法,实例分析了jQuery实现form表单延时提交的技巧,需要的朋友可以参考下
2015-03-03
文本框输入时实现自动提示（像百度、google一样）
文本框输入时实现自动提示（像百度、google一样）,需要的朋友可以参考下
2012-04-04
浅谈jQuery构造函数分析
jquery的构造函数很好的运用的javascript的充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求，以至于一个函数可以实现多种功能需求，也为JavaScript语言的多态性提供了基础，在这个构造函数中，提供了六种不同的调用格式（根据官方API文档）
2015-05-05
jquery实现回车键触发事件(实例讲解)
下面小编就为大家分享一篇jquery实现回车键触发事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
基于jquery实现ajax无刷新评论
这篇文章主要为大家详细介绍了基于jquery实现ajax无刷新评论的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考
2016-05-05
jQuery 加上最后自己的验证
jQuery 加上最后自己的验证这段代码可以添加自定义的 jquery验证，而不必单一的依靠在标签中写 validation="{}", 或者是代码方式写验证规则，那样都会在要验证的控件后面写出错误信息。
2009-11-11