本文实例讲述了jquery插件fusioncharts绘制2d环饼图效果。分享给大家供大家参考，具体如下：
1、静态页面：
我要评论
<!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程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论