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 Validate 校验多个相同name的方法
May 18 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jquery插件懒加载的示例
Oct 24 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
服务器端解压缩zip的脚本
2006/12/22 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python的unittest测试类代码实例
2017/12/07 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python基于socket函数实现端口扫描
2020/05/28 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
毕业生自我推荐
2013/11/04 职场文书
劳资人员岗位职责
2013/12/19 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
学校四风对照检查材料
2014/08/28 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
我的收音机情缘
2022/04/05 无线电