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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现手风琴特效
Jan 11 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python求质数列表的例子
2019/11/24 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
《去年的树》教学反思
2014/04/11 职场文书
会议通知范文
2015/04/15 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android