jQuery插件FusionCharts实现的三维(三维的缩写)帕累托图效果示例【附演示源码】

本文实例讲述了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 '标题fusioncharts Pareto 3D图/title脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js/script脚本类型=' text/JavaScript ' src=' http : FusionCharts/FusionCharts。js/script脚本类型=' text/JavaScript ' $(function(){ var Pareto 3d=new FusionCharts(' FusionCharts/Pareto 3d。swf '，' pareto3DId '，' 100% ')Pareto 3d。setxmlurl(' Pareto 3d。XML ')；帕累托3d。渲染('帕累托3d图表')；});/script/head body div id=' Pareto 3d图表'/div/body/html 2、设计三维(三维的缩写)帕累托图的数据源pareto3D.xml:

？可扩展标记语言版本='1.0 '编码='UTF-8 '？图表标题='(jb51.net)一周统计人数xAxisName='星期PYAxisName='人数plotGradientColor=' showValues=' 0 ' base font='微软雅黑baseFontSize=' 20 ' baseFontColor=' # 654545 ' outnvbasefont='宋体outnvbasefontsize=' 24 ' outnvbasefontcolor=' # 989899 '绘制锚点=' 1 ' anchorSides=' 4 ' anchorRadius=' 10 ' anchorBorderColor=' # ff 0000 ' anchorborderthingth=' 1 ' anchorBgColor=' # 00 ff00 ' anchorAlpha=' 50 ' anchorBgAlpha=' 50 ' numdivline=' 8 ' divlineisdashid=' 1 ' set label='星期一值='205'/设置标签='星期二值='165'/设置标签='星期三值='85'/设置标签='星期四value='62'/set label='星期五值='73'/设置标签='星期六value='109'/set label='星期日值=' 121 '/图表3，设计结果

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

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

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

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