jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】


Posted in jQuery onApril 02, 2017

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

1、index.html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionCharts Doughnut3D</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
$(function(){
 var doughnut3D = new FusionCharts( "FusionCharts/Doughnut3D.swf", "doughnut2DId", "100%", "540", "0" );
 doughnut3D.setXMLUrl("doughnut3D.xml");
 doughnut3D.render("doughnut3DChart");
});
</script>
</head>
<body>
  <div id="doughnut3DChart"></div>
</body>
</html>

2、XML数据源
doughnut3D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)一周收入' showPercentageValues='1' baseFont='微软雅黑' baseFontSize='16'
    baseFontColor='#00FF00' showLegend='1' legendPosition='BOTTOM' legendIconScale='0'
    legendBorderColor='#0000FF' legendShadow='1' legendAllowDrag='1'>
  <set label='星期一' value='895645' />
  <set label='星期二' value='154511' />
  <set label='星期三' value='562111' />
  <set label='星期四' value='451211' />
  <set label='星期五' value='356124' />
  <set label='星期六' value='754544' />
  <set label='星期日' value='454212' />
</chart>

3、运行效果图如下:

jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】

jQuery 相关文章推荐
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
基于jquery实现二级联动效果
Mar 30 #jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
如何编写jquery插件
Mar 29 #jQuery
You might like
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
VUE脚手架具体使用方法
2019/05/20 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
学习Django知识点分享
2019/09/11 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python实时监控logstash日志代码
2020/04/27 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
村捐赠仪式答谢词
2014/01/21 职场文书
四下基层实施方案
2014/03/28 职场文书
项目投资建议书
2014/05/16 职场文书
护校行动方案
2014/05/31 职场文书
雨中的树观后感
2015/06/03 职场文书