FusionChart各种图与Springmvc结合
程序员文章站
2022-06-04 11:26:47
...
1.需要导入FusionCharts.js文件及所要用到的各种swf播放器
其实各种图的前台基本都一样,只是一个flash的swf文件选择的不一样,不同的图,选择其对应的swf播放器就OK,后台的数据源格式(暂时以xml形式),都
在FusionchartController处理类里:如下:
一、FusionChart与Springmvc结合,后台处理类:
FusionchartController.java
二、前台JSP页面:
1.柱状图(2D)column2d.jsp
2.柱状图(3D)column3d.jsp
其它的前台JSP页面就不多写了,区别就在于new FusionCharts里的第一个参数。swf播放器。
效果图如下:
单一系统:
------------------------------------------------------=---
柱状图(2D纵向)
柱状图(3D纵向)
柱状图(2D横向)
饼状图(2D)
饼状图(3D)
线性图:
区域图
圆环图
-----------------------------------------------------------------
多系列图:
-----------------------------------------------------------------
柱状图(2D纵向)
柱状图(3D纵向)
柱状图(2D横向)
线性图
区域图
----------------------------------------------------------------
组合图:
----------------------------------
柱状图2D+线性图
柱状图3D+线性图
---------------------------------------------------
堆图:
----------------------------------------------------
柱状图2D(纵向)
柱状图3D(纵向)
柱状图2D(横向)
区域2D图
其实各种图的前台基本都一样,只是一个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纵向)
柱状图(3D纵向)
柱状图(2D横向)
饼状图(2D)
饼状图(3D)
线性图:
区域图
圆环图
-----------------------------------------------------------------
多系列图:
-----------------------------------------------------------------
柱状图(2D纵向)
柱状图(3D纵向)
柱状图(2D横向)
线性图
区域图
----------------------------------------------------------------
组合图:
----------------------------------
柱状图2D+线性图
柱状图3D+线性图
---------------------------------------------------
堆图:
----------------------------------------------------
柱状图2D(纵向)
柱状图3D(纵向)
柱状图2D(横向)
区域2D图
推荐阅读
-
iPhone XR与A14最强芯的结合体!iPhone SE Plus渲染图曝光
-
创意摄影作品 摄影与涂鸦的完美结合趣图
-
ASP与Excel结合生成数据表和Chart图的代码
-
天图投资董事总经理李竞:AI、大数据与零售的结合是未来趋势
-
使用Highcharts结合PHP与Mysql生成饼状图
-
FusionChart各种图与Springmvc结合
-
highchats与php结合生成动态统计图
-
highchats与php结合生成动态统计图_PHP教程
-
iPhone XR与A14最强芯的结合体!iPhone SE Plus渲染图曝光
-
echarts中的饼状图与vue中的table表格两者结合,实现数据的展示