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实现Select动态添加数据
Jun 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现日历效果
Sep 11 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
漂亮的提示信息(带箭头)
2007/03/21 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
八大排序算法的Python实现
2021/01/28 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
金融系应届毕业生求职信
2014/05/26 职场文书
文化产业实施方案
2014/06/07 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
公司2014年度工作总结
2014/12/10 职场文书
诚信承诺书
2015/01/19 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
民事调解书范文
2015/05/20 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android