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


Posted in Javascript onMarch 10, 2017

本文实例讲述了jQuery插件HighCharts绘制2D带有Legend的饼图效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带有Legend的饼图</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: '#384778',
         plotBorderWidth: '50px',
         plotShadow: true
       },
       title: {
         text: '(3water.com)2013年4月日收入明细'
       },
       tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
           cursor: 'pointer',
           dataLabels: {
             enabled: true
           },
           showInLegend: true
         }
       },
       series: [{
         type: 'pie',
         name: '日收入比率',
         data: [
           ['20130401', 45.0],
           ['20130402', 26.8],
           ['20130403', 56.3],
           ['20130404', 74.1],
           ['20130405', 45.0],
           ['20130406', 26.8],
           ['20130407', 56.4],
           ['20130408', 84.1],
           ['20130409', 55.0],
           ['20130410', 56.8],
           ['20130411', 64.8],
           ['20130412', 63.2],
           ['20130413', 64.8],
           ['20130414', 63.2],
           ['20130415', 64.8],
           ['20130416', 45.2],
           ['20130417', 68.8],
           ['20130418', 63.2],
           ['20130419', 24.8],
           ['20130420', 53.2],
           {
             name: '20130421',
             y: 27.8,
             sliced: true,
             selected: true
           },
           ['20130422', 63.2],
           ['20130423', 64.8],
           ['20130424', 63.2],
           ['20130425', 64.8],
           ['20130426', 45.2],
           ['20130427', 68.8],
           ['20130428', 63.2],
           ['20130429', 24.8],
           ['20130430', 98.8]
         ]
       }]
     });
   });
</script>
</head>
<body>
  <div id="pieChart" style="width: 1250px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

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

Javascript 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
Vue.js之slot深度复制详解
Mar 10 #Javascript
JS实现的自动打字效果示例
Mar 10 #Javascript
jquery实现的table排序功能示例
Mar 10 #Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 #Javascript
常用的js方法合集
Mar 10 #Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 #Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 #Javascript
You might like
两个开源的Php输出Excel文件类
2010/02/08 PHP
PHP中的float类型使用说明
2010/07/27 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
document.execCommand()的用法小结
2014/01/08 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
js实现中文实时时钟
2020/01/15 Javascript
使用Python的turtle模块画图的方法
2017/11/15 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
全运会口号
2014/06/20 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
Python语言内置数据类型
2022/02/24 Python