FusionChart各种图与Springmvc组合

2012-08-29

FusionChart各种图与Springmvc结合1.需要导入FusionCharts.js文件及所要用到的各种swf播放器其实各种图的

FusionChart各种图与Springmvc结合
1.需要导入FusionCharts.js文件及所要用到的各种swf播放器

其实各种图的前台基本都一样，只是一个flash的swf文件选择的不一样，不同的图，选择其对应的swf播放器就OK，后台的数据源格式（暂时以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纵向)