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


Posted in jQuery onMarch 21, 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">
$(function(){
   $('#pieChart').highcharts({
     chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: '(3water.com)2013年收入'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: '#000000',
            connectorColor: '#000000',
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        type: 'pie',
        name: '月收入占比',
        data: [
          ['一月', 8956],
          ['二月', 5612],
          ['三月', 4515],
          ['四月', 9565],
          ['五月', 2356],
          ['六月', 4512],
          ['七月', 5623],
          ['八月', 1245],
          ['九月', 4578],
          ['十月', 8754],
          ['十一月',6231],
          ['十二月',5124]
        ]
      }]
    });
 });
</script>
</head>
<body>
  <div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图如下:

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

jQuery 相关文章推荐
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
python爬取网站数据保存使用的方法
2013/11/20 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
浅谈python 类方法/静态方法
2020/09/18 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
聘任通知书
2015/09/21 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python利器openpyxl之操作excel表格
2021/04/17 Python