微信小程序网站建设_jQuery插件FusionCharts绘制Scr

2021-01-12 12:47

jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】       这篇文章主要介绍了jQuery插件FusionCharts绘制ScrollColumn2D图效果,结合实例形式分析了jQuery使用FusionCharts插件结合swf文件实现ScrollColumn2D图的绘制功能,并附带demo源码供读者下载参考,需要的朋友可以参考下

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

<页面代码：

 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"TR/html4/loose.dtd" 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 title FusionCharts ScrollColumn2D图 /title 
 script type="text/javascript" src="js/jquery-1.7.2.min.js" /script 
 script type="text/javascript" src="js/FusionCharts.js" /script 
 script type="text/javascript" 
 $(function(){
 var scrollColumn2D = new FusionCharts( "js/ScrollColumn2D.swf", "scrollColumn2D_Id", "500", "600", "0" );
 scrollColumn2D.setXMLUrl("scrollColumn2D.xml");
 scrollColumn2D.render("scrollColumn2D_div");
 /script 
 /head 
 body 
 div id="scrollColumn2D_div" /div 
 /body 
 /html 

2、数据源 scrollColumn2D.xml：

 xml version="1.0" encoding="UTF-8" 
 chart caption='(统计)2014年和2013年年收入' xAxisName='月份' yAxisName='收入' showValues='0' useRoundEdges='1' baseFontSize='14' baseFontColor='FF0000' 
 categories 
 category label='一月' / 
 category label='二月' / 
 category label='三月' / 
 category label='四月' / 
 category label='五月' / 
 category label='六月' / 
 category label='七月' / 
 category label='八月' / 
 category label='九月' / 
 category label='十月' / 
 category label='十一月' / 
 category label='十二月 ' / 
 /categories 
 dataset seriesName='2014' 
 set value='27456' / 
 set value='28950'/ 
 set value='51100' / 
 set value='29560' / 
 set value='45120' / 
 set value='95320' / 
 set value='65231' / 
 set value='36530' / 
 set value='23321' / 
 set value='32312' / 
 set value='98856' / 
 set value='21212' / 
 /dataset 
 dataset seriesName='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='23233' / 
 set value='62622' / 
 set value='32333' / 
 /dataset 
 /chart 

3、运行结果：

（1）一月到六月数据

（2）七月到十二月数据

附：完整实例代码点击此处。

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

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