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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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静态新闻列表自动生成代码
2007/06/14 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python中的异常处理学习笔记
2015/01/28 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
python分布式环境下的限流器的示例
2017/10/26 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python excel和yaml文件的读取封装
2021/01/12 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
运动会拉拉队口号
2014/06/09 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers