jfreechart_fusioncharts_后台数据,页面图形显示

最新推荐文章于 2022-10-30 10:21:04 发布

pingdouble

最新推荐文章于 2022-10-30 10:21:04 发布

阅读量1.1k

点赞数

分类专栏： jfreechart_fusioncharts_后台数据页面图形显示文章标签： jfreechart_fusioncha 页面图形显示

本文链接：https://blog.csdn.net/pingdouble/article/details/49890723

版权

页面图形显示同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jfreechart_fusioncharts_后台数据

0 篇文章 0 订阅

订阅专栏

1,JFreeChart

引用对应的jar

pom.xml

<dependency>
<groupId>jfreechart</groupId>
<artifactId>jfreechart</artifactId>
<version>1.0.0</version>
</dependency>

package com.jiayou.chart;

import java.awt.Font;
import java.util.Iterator;
import java.util.Map;

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

import org.jfree.chart.ChartColor;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.ValueAxis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.chart.servlet.ServletUtilities;
import org.jfree.chart.title.TextTitle;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.jiayou.common.web.BaseController;
import com.jiayou.order.service.TOrderService;

@Controller
@RequestMapping("/jfreechart")
public class ColumnChartController extends BaseController {
@Autowired
protected TOrderService tOrderService;

@RequestMapping("/jfreechart")
public String resultmap() {
return "/jfreechart/jfreechart";
}

// 显示柱状图
@RequestMapping(value = "/getColumnChart")
public ModelAndView getColumnChart(HttpServletRequest request, HttpServletResponse response, ModelMap modelMap) throws Exception {

// 1. 获得数据集合
CategoryDataset dataset = tOrderService.findeObject();
// 2. 创建柱状图
JFreeChart chart = ChartFactory.createBarChart3D("订单统计图形", // 图表标题
"订单类型", // 目录轴的显示标签
"百分比", // 数值轴的显示标签
dataset, // 数据集
PlotOrientation.HORIZONTAL, // 图表方向：水平、垂直
false, // 是否显示图例(对于简单的柱状图必须是false)
false, // 是否生成工具
false // 是否生成URL链接
);
// 3. 设置整个柱状图的颜色和文字（char对象的设置是针对整个图形的设置）
chart.setBackgroundPaint(ChartColor.WHITE); // 设置总的背景颜色

// 4. 获得图形对象，并通过此对象对图形的颜色文字进行设置
CategoryPlot p = chart.getCategoryPlot();// 获得图表对象
p.setBackgroundPaint(ChartColor.lightGray);// 图形背景颜色
p.setRangeGridlinePaint(ChartColor.WHITE);// 图形表格颜色

// 5. 设置柱子宽度
BarRenderer renderer = (BarRenderer) p.getRenderer();
renderer.setMaximumBarWidth(0.2);

// 解决乱码问题
getChartByFont(chart);

// 6. 将图形转换为图片，传到前台
String fileName = ServletUtilities.saveChartAsJPEG(chart, 1100, 400, null, request.getSession());
String chartURL = request.getContextPath() + "/chart?filename=" + fileName;
modelMap.put("chartURL", chartURL);
return new ModelAndView("/jfreechart/jfreechart", modelMap);
}

// 设置文字样式
private static void getChartByFont(JFreeChart chart) {
// 1. 图形标题文字设置
TextTitle textTitle = chart.getTitle();
textTitle.setFont(new Font("宋体", Font.BOLD, 30));

// 2. 图形X轴坐标文字的设置
CategoryPlot plot = (CategoryPlot) chart.getPlot();
CategoryAxis axis = plot.getDomainAxis();
axis.setLabelFont(new Font("宋体", Font.BOLD, 22)); // 设置X轴坐标上标题的文字
axis.setTickLabelFont(new Font("宋体", Font.BOLD, 22)); // 设置X轴坐标上的文字

// 2. 图形Y轴坐标文字的设置
ValueAxis valueAxis = plot.getRangeAxis();
valueAxis.setLabelFont(new Font("宋体", Font.BOLD, 25)); // 设置Y轴坐标上标题的文字
valueAxis.setTickLabelFont(new Font("sans-serif", Font.BOLD, 22));// 设置Y轴坐标上的文字
}
}

jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<c:set var="ctx" value="${pageContext.request.contextPath}/"/>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
</head>
<body>
<div style="text-align:center">
<%-- jfreechart _3D柱状图 <br><br>
点击显示柱状图<a href="${ctx }jfreechart/getColumnChart">getMajorChart</a>
<br><br> --%>
<img src="${chartURL}" width=600 height=400 border=0 color=gray>
</div>

</body>
</html>

获取map数据

/**
* 方法名称: findeObject 描述: 返回的是SQL的数据集合,转成map集合操作
*
* @return
* @create 2015-11-16 上午11:30:25
* @author ljj
* @version 1.0.0
*/
// 获取一个演示用的组合数据集对象
public DefaultCategoryDataset findeObject() throws Exception {
StringBuffer sb = new StringBuffer("SELECT ");
OrderStatus orderStatus[] = OrderStatus.values();
for (OrderStatus orderStatu : orderStatus) {
sb.append("sum(case when STATUS ='" + orderStatu.getValue() + "' then 1 else 0 end) as " + orderStatu.getLabel() + ",");
}
sb.append(" count(*) as 总个数");
sb.append(" from t_orders group by CREATE_TIME;");
SQLQuery queryList = orderdao.createSQLQuery(sb.toString());
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
List list = queryList.list();
Object[] objects = (Object[]) list.get(0);
for (int j = 0; j < orderStatus.length; j++) {
dataset.addValue(Integer.valueOf(objects[j].toString()), "", orderStatus[j].getLabel());
}
return dataset;
}

2.fusioncharts

fusioncharts 引用的js和css文件

/**
*
*/
package com.jiayou.chart;

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;

import com.jiayou.common.web.BaseController;

@Controller
@RequestMapping("/fusionchart")
public class FusionchartController extends BaseController {
// 跳转到单系列图表
@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";
}
// views/jfreechart/NewFile.jsp
return null;
}

@RequestMapping(value = "/single")
public String index() {
return "jfreechart/NewFile";
}

// 单系列图表的数据源
@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("<graph caption='订单统计图形' xAxisName='订单类型' yAxisName='单位' showNames='1' decimalPrecision='0' formatNumberScale='0'>");
tOrderService.compleString(sb);
sb.append("</graph>");
response.getWriter().write(sb.toString());
}

/**
* 方法名称: compleString 描述: 组合和拼接数据
*
* @param sb
* @create 2015-11-17 下午4:58:39
* @author ljj
* @version 1.0.0
*/
public void compleString(StringBuffer returnSb) throws Exception {

StringBuffer sb = new StringBuffer("SELECT ");
OrderStatus orderStatus[] = OrderStatus.values();
for (OrderStatus orderStatu : orderStatus) {
sb.append("sum(case when STATUS ='" + orderStatu.getValue() + "' then 1 else 0 end) as " + orderStatu.getLabel() + ",");
}
sb.append(" count(*) as 总个数");
sb.append(" from t_orders group by CREATE_TIME;");
SQLQuery queryList = orderdao.createSQLQuery(sb.toString());
List list = queryList.list();
Object[] objects = (Object[]) list.get(0);
for (int j = 0; j < orderStatus.length; j++) {
returnSb.append("<set name='"+orderStatus[j].getLabel()+"' value='"+Integer.valueOf(objects[j].toString())+"' color='"+RandomColor.getColor()+"' />");
// dataset.addValue(Integer.valueOf(objects[j].toString()), "", orderStatus[j].getLabel());
}
}

// 跳转到多系列图表
@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

<%@ page language="java" contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}/"/>
<%@ include file="../include/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="${ctx }/static/fusioncharts/js/FusionCharts.js" type="text/javascript" ></script>
<script src="${ctx }/static/fusioncharts/js/FusionCharts.min.js" type="text/javascript" ></script>
<script src="${ctx }/static/plugins/easyui/jquery/jquery-1.11.1.min.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 }/static/fusioncharts/charts/Doughnut3D.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>

</body>
</html>