会“变身“的柱形图(FusionChart)

1、新建web项目,布局结构如下图:

会“变身“的柱形图(FusionChart)_第1张图片

FusionChart中的文件结构如下:

会“变身“的柱形图(FusionChart)_第2张图片

2、在WebContent下新建column.html;

column.html:





FusionChart实现可变柱形图






   

3、新建提供数据源的XML文件,column2D.xml;

column2D.xml:




	
	
	
	
	
	
	
	
	
	
	
	
	


	
	
	
	
	
	
	
	
	
	
	
	
	


    
	
	
	
	
	
	
	
	
	
	
	
	


	
	
	
	
	
	
	
	
	
	
	
	
	



4、新建xml中formAction跳转页面,table.html;

table.html:





某大学2000-2012部分学院人数统计





   
年份 计算机学院 外国语学院 物流学院
2000 25601 27400 45000
2001 20148 57401 44835
2002 17372 41941 18722
2003 35407 45263 77557
2004 38105 117320 92633
2005 25601 114845 45000
2006 20148 57401 44835
2007 17372 41941 18722
2008 35407 45263 77557
2009 38105 117320 92633
2010 35407 114845 77557
2011 38105 117320 92633
2012 56894 114845 42633

5、运行项目:http://localhost:8080/jQuery/column.html,结果如下图:

(1)为点击任何键时

会“变身“的柱形图(FusionChart)_第3张图片

(2)通过鼠标改变虚线柱形图值后,显示的结果如下图

会“变身“的柱形图(FusionChart)_第4张图片

(3)点击“Restore”后,结果回复最初的数据图形

会“变身“的柱形图(FusionChart)_第5张图片

(4)点击“Submit”提交后,页面跳转到table.html(http://localhost:8080/jQuery/table.html)

会“变身“的柱形图(FusionChart)_第6张图片


你可能感兴趣的:(会“变身“的柱形图(FusionChart))