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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery制作的移动端购物车效果完整示例
Feb 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
PHP实现文件下载详解
2014/11/27 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Python ORM编程基础示例
2020/02/02 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
python定义具名元组实例操作
2021/02/28 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
《四季》教学反思
2014/04/08 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书