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


Posted in jQuery onApril 10, 2017

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

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 Doughnut2D</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 doughnut2D = new FusionCharts( "FusionCharts/Doughnut2D.swf", "doughnut2DId", "100%", "540", "0" ); 
 doughnut2D.setXMLUrl("doughnut2D.xml"); 
 doughnut2D.render("doughnut2DChart"); 
});
</script>
</head>
<body>
  <div id="doughnut2DChart"></div>
</body>
</html>

2、XML数据源 doughnut2D.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绘制2D环饼图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery日期范围选择器附源码下载
May 23 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
You might like
php自动给网址加上链接的方法
2015/06/02 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python实现简易数码时钟
2021/02/19 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
自我评价的正确写法
2013/09/19 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
具结保证书
2015/01/17 职场文书
《法国号》教学反思
2016/02/22 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
php引用传递
2021/04/01 PHP