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

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滚动栏2d图/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/FusionCharts。js '/script script type=' text/JavaScript ' $(function(){ var scrolum2d=new FusionCharts(' js/scrolum2d。swf '，' scrollColumn2D _ Id '，' 500滚动列2D。setxmlurl('滚动列2d。XML ')；滚动栏2d。render(' scroll column 2d _ div ')；});/script/head body div id=' scroll column 2d _ div '/div/body/html 2，数据源scrollColumn2D.xml:

？可扩展标记语言版本='1.0 '编码='UTF-8 '？图表标题='(jb51.net统计)2014年和2013年年收入xAxisName='月份' yAxisName='收入showValues=' 0 ' useRoundEdges=' 1 ' baseFontSize=' 14 ' baseFontColor=' ff 0000 '类别类别标签='一月/类别标签='二月/类别标签='三月/类别标签='四月/类别标签='五月/类别标签='六月/类别标签='七月/类别标签='八月/类别标签='九月/类别标签='十月/类别标签='十一月/类别标签='十二月//类别数据集seriesName='2014 '设置值='27456' /设置值='28950'/设置值='51100' /设置值='29560' /设置值='45120' /设置值='95320' /设置值='65231' /设置值='36530' /设置值='23321' /设置值='32312' /设置值=' set value=' 21212 '/数据集数据集系列名称=' 2013 ' set value=' 23322 '/set value=' 23298 '/set value=' 78454 '/set value=' 23233 '/set value=' 45122 '/set value=' 12212 '/set value=' 23212 '/set value=' 85455 '/set value=' 55323 '/set value='运行结果：

(1)一月到六月数据

(2)七月到十二月数据

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

注：该源码需要放到服务器环境下运行！

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

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