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

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

1、静态页面index.html:

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title FusionCharts doughnut 2d/title脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js/script脚本类型=' text/JavaScript ' src=' http : FusionCharts/FusionCharts。js '/script script type=' text/JavaScript ' $(function(){ var dough nut 2d=new FusionCharts(' FusionCharts/dough nut 2d甜甜圈2D.setXMLUrl('甜甜圈2d。XML ')；甜甜圈2D.render('甜甜圈2d图表’)；});/script/head body div id='甜甜圈2 chart '/div/body/html 2、XML数据源甜甜圈2D.xml:

？可扩展标记语言版本='1.0 '编码='UTF-8 '？图表标题='(jb51.net统计)一周收入showPercentageValues=' 1 '基本字体='微软雅黑baseFontSize=' 16 ' baseFontColor=' # 00ff 00 ' show legend=' 1 '图例位置=' BOTTOM '图例conscale=' 0 ' legendBorderColor=' # 0000 ff ' 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 '/图表3，运行结果

附：完整实例代码点击此处本站下载。

注：该源码需要放到服务器环境下运行！否则无法加载可扩展标记语言文件数据。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。