本文实例讲述了jQuery插件FusionCharts绘制的三维(三维的缩写)环饼图效果。分享给大家供大家参考,具体如下:
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 Dought 3d/title脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js/script脚本类型=' text/JavaScript ' src=' http : FusionCharts/FusionCharts。js/script脚本类型=' text/JavaScript ' $(function(){ var Dought3d=new FusionCharts(' FusionCharts/Dought3d甜甜圈3D.setXMLUrl('甜甜圈3d。XML ');甜甜圈' 3D.render('甜甜圈3d图表’);});/script/head body div id=' doughnut 3d chart '/div/body/html 2、XML数据源甜甜圈3D.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程序设计有所帮助。