本文实例讲述了jquery插件fusioncharts绘制的3d环饼图效果。分享给大家供大家参考,具体如下:
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 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='(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程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
微信小程序wx.scanCode扫描条形码,偶尔出现条形码不正确导致查询失败
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
网友评论