FusionChart各種圖與Springmvc結合

原創 iteye_2722 2018-08-30 15:26
1.需要導入FusionCharts.js文件及所要用到的各種swf播放器

其實各種圖的前臺基本都一樣，[color=red]只是一個flash的swf文件選擇的不一樣，不同的圖，選擇其對應的swf播放器就OK[/color]，後臺的數據源格式（暫時以xml形式），都
在FusionchartController處理類裏：如下：

一、FusionChart與Springmvc結合，後臺處理類：
FusionchartController．java

package com.xzjdxt.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/fusionchart")
public class FusionchartController {
	//跳轉到單系列圖表
	@RequestMapping("/single_chart/{flag}")
	public String single_chart(@PathVariable String flag,HttpServletRequest request, HttpServletResponse response,ModelMap model) {
		model.addAttribute("flag",flag);
		if("FCF_Column3D".equals(flag)){
			return "/fusionchart/single_chart/column3d";
		}
		if("FCF_Column2D".equals(flag)){
			return "/fusionchart/single_chart/column2d";
		}
		if("FCF_Bar2D".equals(flag)){
			return "/fusionchart/single_chart/bar2d";
		}
		if("FCF_Pie2D".equals(flag)){
			return "/fusionchart/single_chart/pie2d";
		}
		if("FCF_Pie3D".equals(flag)){
			return "/fusionchart/single_chart/pie3d";
		}
		if("FCF_Line".equals(flag)){
			return "/fusionchart/single_chart/line2d";
		}
		if("FCF_Area2D".equals(flag)){
			return "/fusionchart/single_chart/area2d";
		}
		if("FCF_Doughnut2D".equals(flag)){
			return "/fusionchart/single_chart/doughnut2d";
		}
		return null;
	}

	//單系列圖表的數據源
	@RequestMapping(value="/single_chartData")
	public void single_chartData(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Pragma","No-cache"); 
		response.setHeader("Cache-Control","no-cache"); 
		response.setDateHeader("Expires", 0); 
		 StringBuffer sb = new StringBuffer();
		  sb.append("<graph caption='銷售業績圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>");
		  sb.append("<set name='一月' value='444' color='AFD8F8' />");
		  sb.append("<set name='二月' value='857' color='F6BD0F' />");
		  sb.append("<set name='三月' value='671' color='8BBA00' />");
		  sb.append("<set name='四月' value='494' color='FF8E46'/>");
		  sb.append("<set name='五月' value='761' color='008E8E'/>");
		  sb.append("<set name='六月' value='960' color='D64646'/>");
		  sb.append("<set name='七月' value='629' color='8E468E'/>");
		  sb.append("<set name='八月' value='622' color='588526'/>");
		  sb.append("<set name='九月' value='376' color='B3AA00'/>");
		  sb.append("<set name='十月' value='494' color='008ED6'/>");
		  sb.append("<set name='十一月' value='761' color='9D080D'/>");
		  sb.append("<set name='十二月' value='960' color='A186BE'/>");
		  sb.append("</graph>");
		response.getWriter().write(sb.toString());
	}

	//跳轉到多系列圖表
	@RequestMapping("/multi_chart/{flag}")
	public String multi_chart(@PathVariable String flag,HttpServletRequest request, HttpServletResponse response,ModelMap model) {
		model.addAttribute("flag",flag);
		if("FCF_MSColumn2D".equals(flag)){
			return "/fusionchart/multi_chart/mscolumn2d";
		}
		if("FCF_MSColumn3D".equals(flag)){
			return "/fusionchart/multi_chart/mscolumn3d";
		}
		if("FCF_MSBar2D".equals(flag)){
			return "/fusionchart/multi_chart/msbar2d";
		}
		if("FCF_MSColumn2DLineDY".equals(flag)){
			return "/fusionchart/multi_chart/msline2d";
		}
		if("FCF_MSArea2D".equals(flag)){
			return "/fusionchart/multi_chart/msarea2d";
		}
		return null;
	}

	//多系列圖表數據源
	@RequestMapping(value="/multi_chartData")
	public void multi_chartData(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Pragma","No-cache"); 
		response.setHeader("Cache-Control","no-cache"); 
		response.setDateHeader("Expires", 0); 

		StringBuffer sb = new StringBuffer();
		  sb.append("<graph xaxisname='Continent' yaxisname='Export' hovercapbg='DEDEBE' hovercapborder='889E6D' rotateNames='0' yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC'  decimalPrecision='0' showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='Global Export'>");
			  sb.append("<categories font='Arial' fontSize='11' fontColor='000000'>");
				  sb.append("<category name='N. America' hoverText='North America'/>");
				  sb.append("<category name='Asia'/>");
				  sb.append("<category name='Europe'/>");
				  sb.append("<category name='Australia'/>");
				  sb.append("<category name='Africa'/>");
			  sb.append("</categories>");

			  sb.append("<dataset seriesname='Rice' color='FDC12E'>");
				  sb.append("<set value='30'/>");
				  sb.append("<set value='26'/>");
				  sb.append("<set value='29'/>");
				  sb.append("<set value='31'/>");
				  sb.append("<set value='34'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesname='Wheat' color='56B9F9'>");
				  sb.append("<set value='67'/>");
				  sb.append("<set value='98'/>");
				  sb.append("<set value='79'/>");
				  sb.append("<set value='73'/>");
				  sb.append("<set value='70'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesname='Grain' color='C9198D'>");
				  sb.append("<set value='27'/>");
				  sb.append("<set value='25'/>");
				  sb.append("<set value='28'/>");
				  sb.append("<set value='26'/>");
				  sb.append("<set value='10'/>");
			  sb.append("</dataset>");
		  sb.append("</graph>");
		response.getWriter().println(sb.toString());
	}

	//多系列圖表：線性圖數據源
	@RequestMapping(value="/multi_chartDataLine")
	public void multi_chartDataLine(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Pragma","No-cache"); 
		response.setHeader("Cache-Control","no-cache"); 
		response.setDateHeader("Expires", 0); 

		StringBuffer sb = new StringBuffer();
		  sb.append("<graph caption='Daily Visits' subcaption='(from 8/6/2006 to 8/12/2006)' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='0' numdivlines='3' numVdivlines='0' yaxisminvalue='1000' yaxismaxvalue='1800'  rotateNames='1'>");
			  sb.append("<categories font='Arial' fontSize='11' fontColor='000000'>");
				  sb.append("<category name='8/6/2006'/>");
				  sb.append("<category name='8/7/2006'/>");
				  sb.append("<category name='8/8/2006'/>");
				  sb.append("<category name='8/9/2006'/>");
				  sb.append("<category name='8/10/2006'/>");
				  sb.append("<category name='8/11/2006'/>");
				  sb.append("<category name='8/12/2006'/>");
			  sb.append("</categories>");

			  sb.append("<dataset seriesName='Offline Marketing' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>");
				  sb.append("<set value='1327'/>");
				  sb.append("<set value='1826'/>");
				  sb.append("<set value='1699'/>");
				  sb.append("<set value='1511'/>");
				  sb.append("<set value='1904'/>");
				  sb.append("<set value='1957'/>");
				  sb.append("<set value='1296'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesName='Search' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>");
			  sb.append("<set value='2042'/>");
			  sb.append("<set value='3210'/>");
			  sb.append("<set value='2994'/>");
			  sb.append("<set value='3115'/>");
			  sb.append("<set value='2844'/>");
			  sb.append("<set value='3576'/>");
			  sb.append("<set value='1862'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset  seriesName='Paid Search' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>");
				  sb.append("<set value='850'/>");
				  sb.append("<set value='1010'/>");
				  sb.append("<set value='1116'/>");
				  sb.append("<set value='1234'/>");
				  sb.append("<set value='1210'/>");
				  sb.append("<set value='1054'/>");
				  sb.append("<set value='802'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesName='From Mail' color='DBDC25' anchorBorderColor='DBDC25' anchorBgColor='DBDC25'>");
				  sb.append("<set value='541' />");
				  sb.append("<set value='781' />");
				  sb.append("<set value='920' />");
				  sb.append("<set value='754' />");
				  sb.append("<set value='840' />");
				  sb.append("<set value='893' />");
				  sb.append("<set value='451' />");
			sb.append("</dataset>");

		  sb.append("</graph>");
		response.getWriter().println(sb.toString());
	}

	//跳轉到堆圖表
	@RequestMapping("/stacked_chart/{flag}")
	public String stacked_chart(@PathVariable String flag,HttpServletRequest request, HttpServletResponse response,ModelMap model) {
		model.addAttribute("flag",flag);
		if("stacked_column2".equals(flag)){
			return "/fusionchart/stacked_chart/stackedcolumn2d";
		}
		if("stacked_column3".equals(flag)){
			return "/fusionchart/stacked_chart/stackedcolumn3d";
		}
		if("stacked_bar".equals(flag)){
			return "/fusionchart/stacked_chart/stackedbar2d";
		}
		if("stacked_area".equals(flag)){
			return "/fusionchart/stacked_chart/stackedarea2d";
		}
		return null;
	}
	//堆圖表數據源
	@RequestMapping(value="/stacked_chartData")
	public void stacked_chartData(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Pragma","No-cache"); 
		response.setHeader("Cache-Control","no-cache"); 
		response.setDateHeader("Expires", 0); 

		StringBuffer sb = new StringBuffer();
		  sb.append("<graph xAxisName='Products' yAxisName='Sales' caption='Cumulative Sales' subCaption='( 2004 to 2006 )' decimalPrecision='0' rotateNames='1' numDivLines='3' numberPrefix='$' showValues='0' formatNumberScale='0'>");
			  sb.append("<categories>");
				  sb.append("<category name='Product A'/>");
				  sb.append("<category name='Product B'/>");
				  sb.append("<category name='Product C'/>");
				  sb.append("<category name='Product D'/>");
				  sb.append("<category name='Product E'/>");
			  sb.append("</categories>");

			  sb.append("<dataset seriesName='2004' color='AFD8F8' showValues='0'>");
				  sb.append("<set value='25601.34'/>");
				  sb.append("<set value='20148.82'/>");
				  sb.append("<set value='17372.76'/>");
				  sb.append("<set value='35407.15'/>");
				  sb.append("<set value='38105.68'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesName='2005'  color='F6BD0F' showValues='0'>");
			  sb.append("<set value='57401.85'/>");
			  sb.append("<set value='41941.19'/>");
			  sb.append("<set value='45263.37'/>");
			  sb.append("<set value='117320.16'/>");
			  sb.append("<set value='114845.27'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset  seriesName='Paid Search' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>");
				  sb.append("<set value='850'/>");
				  sb.append("<set value='1010'/>");
				  sb.append("<set value='1116'/>");
				  sb.append("<set value='1234'/>");
				  sb.append("<set value='1210'/>");
				  sb.append("<set value='1054'/>");
				  sb.append("<set value='802'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesName='2006' color='8BBA00' showValues='0'>");
				  sb.append("<set value='45000.65' />");
				  sb.append("<set value='44835.76' />");
				  sb.append("<set value='18722.18' />");
				  sb.append("<set value='77557.31' />");
				  sb.append("<set value='92633.68' />");
			sb.append("</dataset>");

		  sb.append("</graph>");
		response.getWriter().println(sb.toString());
	}
	//跳轉到組合圖
	@RequestMapping("/combination_chart/{flag}")
	public String combination_chart(@PathVariable String flag,HttpServletRequest request, HttpServletResponse response,ModelMap model) {
		model.addAttribute("flag",flag);
		if("column2dline".equals(flag)){
			return "/fusionchart/combination_chart/column2dline";
		}
		if("column3dline".equals(flag)){
			return "/fusionchart/combination_chart/column3dline";
		}
		return null;
	}
	//組合圖數據源
	@RequestMapping(value="/combination_chartData")
	public void combination_chartData(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Pragma","No-cache"); 
		response.setHeader("Cache-Control","no-cache"); 
		response.setDateHeader("Expires", 0); 

		StringBuffer sb = new StringBuffer();
		  sb.append("<graph caption='Sales' PYAxisName='Revenue' SYAxisName='Quantity' numberPrefix='$' showvalues='0'  numDivLines='4' formatNumberScale='0' decimalPrecision='0' anchorSides='10' anchorRadius='3' anchorBorderColor='009900'>");
			  sb.append("<categories>");
				  sb.append("<category name='March'/>");
				  sb.append("<category name='April'/>");
				  sb.append("<category name='May'/>");
				  sb.append("<category name='June'/>");
				  sb.append("<category name='July'/>");
			  sb.append("</categories>");

			  sb.append("<dataset seriesName='Product A' color='AFD8F8' showValues='0'>");
				  sb.append("<set value='25601.34'/>");
				  sb.append("<set value='20148.82'/>");
				  sb.append("<set value='17372.76'/>");
				  sb.append("<set value='35407.15'/>");
				  sb.append("<set value='38105.68'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesName='Product B' color='F6BD0F' showValues='0'>");
				  sb.append("<set value='57401.85'/>");
				  sb.append("<set value='41941.19'/>");
				  sb.append("<set value='45263.37'/>");
				  sb.append("<set value='117320.16'/>");
				  sb.append("<set value='114845.27'/>");
			  sb.append("</dataset>");

			  sb.append("<dataset seriesName='Total Quantity' color='8BBA00' showValues='0' parentYAxis='S'>");
				  sb.append("<set value='45000' />");
				  sb.append("<set value='44835' />");
				  sb.append("<set value='18722' />");
				  sb.append("<set value='77557' />");
				  sb.append("<set value='92633' />");
			sb.append("</dataset>");

		  sb.append("</graph>");
		response.getWriter().println(sb.toString());
	}

}



二、前臺JSP頁面：
1.柱狀圖（2D）column2d.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>
<script src="${ctx }/fusionchart/js/FusionCharts.js" type="text/javascript" ></script>
<script type="text/javascript">	
	 $(document).ready(function() {

	     $.ajax({
	         type:"POST", 
	         url:"${ctx}/fusionchart/single_chartData",
	         success: function(responseText){
		       var chart = new FusionCharts("${ctx }/fusionchart/Charts/FCF_Column2D.swf","single_column2d", "600", "450");
		       chart.setDataXML(responseText);     
		       chart.render("single_column2div");
	      }
	     });
 	});	
</script>

<body bgcolor="#ffffff">
 <div id="single_column2div" align="center">FusionCharts</div>
</body>



2.柱狀圖（3D）column3d.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>
<script src="${ctx }/fusionchart/js/FusionCharts.js" type="text/javascript" ></script>
<script type="text/javascript">	
	 $(document).ready(function() {
	     $.ajax({
	         type:"POST", 
	         url:"${ctx}/fusionchart/single_chartData",
	         success: function(responseText){
		       var chart = new FusionCharts("${ctx }/fusionchart/Charts/FCF_Column3D.swf","single_column3d", "600", "450");
		       chart.setDataXML(responseText);     
		       chart.render("single_column3div");
	      }
	     });
 	});	
</script>

<body bgcolor="#ffffff">
 <div id="single_column3div" align="center">FusionCharts</div>
</body>



其它的前臺JSP頁面就不多寫了，區別就在於new FusionCharts裏的第一個參數。swf播放器。

效果圖如下：

單一系統：
------------------------------------------------------=---
柱狀圖(2D縱向)
[img]http://dl.iteye.com/upload/attachment/571855/557848ee-a2fa-36e2-a828-d0c2ef76e3ed.jpg[/img]
柱狀圖(3D縱向)
[img]http://dl.iteye.com/upload/attachment/571857/6f44b93d-f1ef-3dc2-ba68-ed8472640c2f.jpg[/img]
柱狀圖(2D橫向)
[img]http://dl.iteye.com/upload/attachment/571859/05260404-3bce-3659-b213-99f9a4b5b273.jpg[/img]
餅狀圖(2D)
[img]http://dl.iteye.com/upload/attachment/571861/78a295ee-9644-3d49-829d-2986838885e1.jpg[/img]
餅狀圖(3D)
[img]http://dl.iteye.com/upload/attachment/571863/45bc7e22-9e3a-3c2e-98b4-4b59fb226b16.jpg[/img]

線性圖：
[img]http://dl.iteye.com/upload/attachment/571865/5bef7fad-a739-3139-ab7d-e720f33cb8f4.jpg[/img]

區域圖

[img]http://dl.iteye.com/upload/attachment/571867/b672bb0d-8fd5-3295-ab5f-de40fdff0793.jpg[/img]
圓環圖

[img]http://dl.iteye.com/upload/attachment/571869/805bf2f8-3d35-3097-acc1-329af6f5b9a2.jpg[/img]
-----------------------------------------------------------------
多系列圖：
-----------------------------------------------------------------
柱狀圖(2D縱向)

[img]http://dl.iteye.com/upload/attachment/571872/d79e362d-bfb7-3a83-8dd1-b1f343348db8.jpg[/img]
柱狀圖(3D縱向)
[img]http://dl.iteye.com/upload/attachment/571874/73a53ba3-ed79-3bb8-be90-72c31b56753a.jpg[/img]
柱狀圖(2D橫向)
[img]http://dl.iteye.com/upload/attachment/571876/0c724f2b-fa74-3ead-a79f-664c30b34b8f.jpg[/img]
線性圖
[img]http://dl.iteye.com/upload/attachment/571878/0e40d062-3e30-3cc9-907a-e95dc5e0e3df.jpg[/img]
區域圖
[img]http://dl.iteye.com/upload/attachment/571880/e214934b-5097-3176-bcd0-445ea15c773f.jpg[/img]
----------------------------------------------------------------
組合圖：
----------------------------------
柱狀圖2D+線性圖
[img]http://dl.iteye.com/upload/attachment/571882/5694f38f-1b23-3296-80a3-6a33a14e8532.jpg[/img]
柱狀圖3D+線性圖
[img]http://dl.iteye.com/upload/attachment/571884/212b4391-1160-33fd-bfd5-c4756b4191ca.jpg[/img]
---------------------------------------------------
堆圖：
----------------------------------------------------
柱狀圖2D(縱向)
[img]http://dl.iteye.com/upload/attachment/571886/3b06494a-b469-30de-958c-0ba44e0903b6.jpg[/img]
柱狀圖3D(縱向)
[img]http://dl.iteye.com/upload/attachment/571888/8e743e9f-ab83-3052-9325-f4846572d67a.jpg[/img]
柱狀圖2D(橫向)
[img]http://dl.iteye.com/upload/attachment/571890/6bb704f9-ea8a-3697-b9e6-b62bfeda6a9e.jpg[/img]
區域2D圖
[img]http://dl.iteye.com/upload/attachment/571892/614a6b1b-49f0-3674-914e-c9834b2f973a.jpg[/img]
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

FusionChart的開發和FusionChart的常用XML接口屬性

FusionChart的開發和FusionChart的常用XML接口屬性 之前在百度空間看到的，所以轉過來了 關於Flash統計報表的實現有多種，水晶易表（Flash+XML）、FusionCharts（Flash+XML）、O

super牛牛 2020-06-18 23:45:12

Component(...): Nothing was returned from render

翱翔天地 2020-06-03 21:28:38

fusioncharts 屬性設置

zyx2050 2020-03-09 11:29:23

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '#' is not a valid attribute

翱翔天地 2019-06-11 10:23:22

fusionChart

业精于勤荒于嬉行成于思毁于随 2018-12-06 13:03:23

報表之fusionchart

nizhengjia888 2018-11-26 08:58:08

在Asp.Net上使用fusionchart報表 圖解

iteye_4442 2018-09-07 18:49:56

分享一些FusionCharts Free的資料

iteye_17570 2018-09-06 04:42:27

XBuilder：Ext表單設計的完美實現

woojay 2018-09-06 01:42:48

FusionChart圖表控件 點擊事件（XML和JSON作爲數據源時的分別處理方式）

一意弧行 2018-09-03 17:02:38

Flash圖表組件FusionCharts幫助文檔一：調用靜態方法RenderChart

zhuoran789 2018-08-29 15:16:30