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

摘要: jQuery软件FusionCharts绘图ScrollColumn2D图实际效果实例【附demo源代码免费下载】 本文关键详细介绍了jQuery软件FusionCharts绘图ScrollColumn2D图实际效果,融合案例方式剖析了jQuery应用FusionC...

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程序设计有所帮助。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888