jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
更新时间：2017年04月10日 14:17:33 作者：翱翔天地
这篇文章主要介绍了jQuery插件FusionCharts绘制2D环饼图效果,结合实例形式分析了jQuery使用插件FusionCharts载入xml数据绘制2D环饼图的相关步骤与操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了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='(jb51.net统计)一周收入' 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、运行结果
附：完整实例代码点击此处本站下载。
注：该源码需要放到服务器环境下运行！否则无法加载xml文件数据。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
- jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
- jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
- jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
- jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
- jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
- jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
- jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
- jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
- jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
- Jquery插件之多图片异步上传
- jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
相关文章
这篇文章主要介绍了jQuery实现简易商城系统项目实操，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了jQuery实现ajax的嵌套请求,结合具体实例形式分析了ajax嵌套请求的原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了jquery图片滚动放大效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
这篇文章主要为大家详细介绍了jQuery Json数据格式排版高亮插件json-viewer.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了jQuery满意度星级评价插件特效,我们可以自定义每个五角星代表的分值，鼠标滑过五角星时即可计算当前的分值，这款jQuery评分插件非常简单而且实用。有需要的小伙伴可以参考下2015-08-08
这篇文章主要为大家详细介绍了jquery+CSS3实现3D拖拽相册效果的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
jQuery.Uploadify插件实现带进度条的批量上传功能
这篇文章主要介绍了jQuery.Uploadify插件实现带进度条的批量上传功能,还具有取消上传及删除等功能,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了Jquery实现多个表格的全选复选框功能方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小（font-size）控制图片尺寸的做法是跟Google学习的，但是jQuery代码是根据效果自己想出来的，逻辑很简单，没有什么精妙之处2012-05-05
这篇文章主要介绍了jQuery实现的自定义轮播图功能,结合实例形式详细分析了轮播图的原理、实现步骤及相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论