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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery仿微信聊天界面
May 06 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
工厂采购员岗位职责
2014/04/08 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书