Web在jsp页面中生成柱状图，折线图，饼状图

一、前言

    在实际开发过程中，柱状图，折线图，饼状图在一些OA，ERP中是非常常见的功能，特别是需求方是业务型，数据分析型公司，下面的例子简单实现了饼状图，柱状图，折线图在jsp中生成。（ps:新手上路，不喜勿喷）

二、前期准备
1.使用的框架：ssm（这里不再配置）；
2.需要的第三方包：jfreechart.jar和jcommon.jar

三、配置文件的操作
web.xml:在web.xml中配置jfreechart

<!-- jfreechart配置 -->  <servlet>  <servlet-name>DisplayChart</servlet-name>  <servlet-class>org.jfree.chart.servlet.DisplayChart</servlet-class>  </servlet>  <servlet-mapping>  <servlet-name>DisplayChart</servlet-name>  <url-pattern>/chart</url-pattern>
</servlet-mapping>

四、主要代码

1.柱状图
(1).controller层

@RequestMapping(value = "getColumnChart.do")
public ModelAndView getColumnChart(HttpServletRequest request,HttpServletResponse response, ModelMap modelMap) throws Exception {// 在业务层获取创建的柱状图（此时柱状图已经创建完成的）JFreeChart chart = columnarService.createColumnarTools();// 将图形转换为图片传到dateSet.jspString fileName = ServletUtilities.saveChartAsJPEG(chart, 700, 400,null, request.getSession());String chartURL = request.getContextPath() + "/chart?filename="+ fileName;modelMap.put("chartColumnURL", chartURL);return new ModelAndView("dateSet", modelMap);
}

(2)业务层
接口：

public interface ColumnarService {
public JFreeChart createColumnarTools();

}

实现接口：

@Service
public class ColumnaServicerImp implements ColumnarService {//从柱状图工具类里面获取创建的Columnar柱状图public JFreeChart createColumnarTools() {// TODO Auto-generated method stub// 获得数据CategoryDataset dataset = getDataSet();// 获取柱状图工具类创建的柱状图，（将数据集传入）JFreeChart chart = ColumnarTools.createCoColumnar(dataset);return chart;
}//获取一个演示用的组合数据集对象 为柱状图添加数据private static CategoryDataset getDataSet() {// 数据可以从数据库中得到DefaultCategoryDataset dataset = new DefaultCategoryDataset();dataset.addValue(88, "外评", "上风港");dataset.addValue(86, "内评", "上风港");dataset.addValue(85, "外评", "瑞安");dataset.addValue(84, "内评", "瑞安");dataset.addValue(70, "外评", "花郡");dataset.addValue(65, "内评", "花郡");dataset.addValue(90, "外评", "IFS");dataset.addValue(88, "内评", "IFS");dataset.addValue(80, "外评", "万达");dataset.addValue(75, "内评", "万达");return dataset;
}

}

(3)写一个柱状图的工具类

public class ColumnarTools {//创建一个柱状图//@param dataset柱状图数据// @returnpublic static JFreeChart createCoColumnar(CategoryDataset dataset) {// 创建柱状图JFreeChart chart = ChartFactory.createBarChart3D("各个项目评分统计", // 图表标题"项目名", // x轴的显示标签"项目评分", // y轴的显示标签dataset, // 数据PlotOrientation.VERTICAL, // 图表方向：水平、垂直true, // 显示图例true, // 生成工具true // URL链接);// 对整个图形设置整个柱状图的颜色和文字针chart.setBackgroundPaint(ChartColor.WHITE); // 设置总的背景颜色// 获得图形对象，并通过此对象对图形的颜色文字进行设置CategoryPlot polt = chart.getCategoryPlot();// 获得图表对象polt.setBackgroundPaint(ChartColor.lightGray);// 图形背景颜色polt.setRangeGridlinePaint(ChartColor.WHITE);// 图形表格颜色// 设置柱宽度BarRenderer renderer = (BarRenderer) polt.getRenderer();renderer.setMaximumBarWidth(0.06);renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());renderer.setBaseItemLabelsVisible(true);renderer.setBaseItemLabelFont(new Font("宋体", Font.BOLD, 15));// 设置文字getChartByFont(chart);return chart;}//柱状图设置文字样式
//
// @param chartprivate static void getChartByFont(JFreeChart chart) {// 图形设置标题文字TextTitle textTitle = chart.getTitle();textTitle.setFont(new Font("宋体", Font.BOLD, 20));// 设置图形X轴坐标文字CategoryPlot plot = (CategoryPlot) chart.getPlot();CategoryAxis axis = plot.getDomainAxis();axis.setLabelFont(new Font("宋体", Font.BOLD, 22)); // 设置X轴坐标上标题的文字axis.setTickLabelFont(new Font("宋体", Font.BOLD, 15)); // 设置X轴坐标上的文字// 设置图形Y轴坐标文字ValueAxis valueAxis = plot.getRangeAxis();valueAxis.setLabelFont(new Font("宋体", Font.BOLD, 12)); // 设置Y轴坐标上标题的文字valueAxis.setTickLabelFont(new Font("sans-serif", Font.BOLD, 12));// 设置Y轴坐标上的文字// 设置提示内容的文字chart.getLegend().setItemFont(new Font("宋体", Font.BOLD, 15));
}

}

柱状图的图片就制作出来了，现在只需要传输到jsp页面就可以了。

(4) dataSet.jsp

<style type="text/css">
.img{
width:800px;
height:600px;
border: 0;
color: gray;
}
</style>
<div  style="text-align:center">  柱状图 <br><br>  点击生成柱状图<a href="getColumnChart.do">getMajorChart</a>  <br><br>  <img src="${chartColumnURL}" >  </div><div  style="text-align:center">  饼状图 <br><br>  点击生成饼状图<a href="getPieChart.do">getMajorChart</a>  <br><br>  <img src="${chartPieURL}" >  </div>  <div  style="text-align:center">  折线图 <br><br>  点击生成折线图<a href="getLineChart.do">getMajorChart</a>  <br><br>  <img src="${chartLineURL}" >  </div>

整个柱状图就在jsp能够显示了。
后面就是饼状图和折线图的工具类和业务层了。 controller就不在赘述了，跟柱状图是一样的

2.饼状图

（1）业务层

   @Service
public class PieServiceImp implements PieService {
/*** 从饼状图工具类里面获取创建的Columnar柱状图*/
public JFreeChart createPieTools() {// TODO Auto-generated method stub// 获取饼状图的数据集DefaultPieDataset dataset = getDataSet();// 获取饼状图工具类创建的饼状图JFreeChart chart = PieTools.createPie(dataset);return chart;
}/*** 添加饼状图的数据* * @return*/
private static DefaultPieDataset getDataSet() {// 数据可以从数据库中得到DefaultPieDataset dataset = new DefaultPieDataset();// 添加数据Map<String, Double> map = new HashMap<String, Double>();map.put("张三", (double) 33);map.put("李期", (double) 14);map.put("李四", (double) 27);map.put("王六", (double) 11);Double sum = 0.0;int count = map.size();Set<String> keys = map.keySet();for (String key : keys) {sum += sum + map.get(key);}for (String key : keys) {dataset.setValue(key, map.get(key));}// dataset.setValue("张三",30);// dataset.setValue("李四",12);// dataset.setValue("李四",12);// dataset.setValue("王六",10);return dataset;}

(2) 工具类

public class PieTools {
/*** 创建饼状图* @param dataset 饼状图数据源* @return*/
public static JFreeChart createPie(DefaultPieDataset  dataset){//创建饼状图JFreeChart chart =ChartFactory.createPieChart3D("占比分析", dataset, true, true, true);//为饼状图设置字体getChartByFont(chart);      return chart;
}
/*** 处理饼状图的文字* @param chart*/
private static void getChartByFont(JFreeChart chart){//处理图形上的乱码//处理主标题的乱码chart.getTitle().setFont(new Font("宋体",Font.BOLD,18));//处理子标题乱码chart.getLegend().setItemFont(new Font("宋体",Font.BOLD,15));//获取图表区域对象PiePlot3D categoryPlot = (PiePlot3D)chart.getPlot();//处理图像上的乱码categoryPlot.setLabelFont(new Font("宋体",Font.BOLD,15));//设置图形的生成格式为（张三  23 （10%））（姓名 值 百分比）String fm = "{0} {1} ({2})";categoryPlot.setLabelGenerator(new StandardPieSectionLabelGenerator(fm));
}
}

3.折线图

(1)业务层

@Service
public class FoldLineServiceImp implements FoldLineService{/*** 从折线图工具类中获取创建完成的折线图*/
public JFreeChart createFoldLineTools() {// TODO Auto-generated method stub//获取折线图数据源DefaultCategoryDataset dataset=getDataSet();//从折线图工具类中获取创建完成的折线图JFreeChart chart=FoldLineTools.createFoldLine(dataset);return chart;
}
/*** 为折线图创建数据* @return*/
public static DefaultCategoryDataset getDataSet(){//创建数据集DefaultCategoryDataset dataset=new DefaultCategoryDataset();//添加数据dataset.addValue(15636.36, "张三", "一月");dataset.addValue(10001.36, "张三", "二月");dataset.addValue(8856.20, "张三", "三月");dataset.addValue(5964.26, "张三", "四月");dataset.addValue(12365.23, "李四", "一月");dataset.addValue(20056.12, "李四", "二月");dataset.addValue(7896.36, "李四", "三月");dataset.addValue(23005.45, "李四", "四月");return dataset;}}

(2),工具类

public class FoldLineTools {
/*** 创建一个折线图* * @return*/
public static JFreeChart createFoldLine(DefaultCategoryDataset dataset) {JFreeChart chart = ChartFactory.createLineChart("业绩分析", "月份", "业绩（元）",dataset, PlotOrientation.VERTICAL, true, true, true);// 数据的行数 即折线的条数int datasetSize = dataset.getRowCount();System.out.println(datasetSize);getChartByFont(chart, datasetSize);return chart;}/*** 处理折线图上的文字* * @param chart* @param datasetSize*            数据的行数 即折线的条数*/
private static void getChartByFont(JFreeChart chart, int datasetSize) {// 处理主标题的文字chart.getTitle().setFont(new Font("宋体", Font.BOLD, 18));// 处理子标题文字chart.getLegend().setItemFont(new Font("宋体", Font.BOLD, 15));// 获取图表区域CategoryPlot categoryPlot = (CategoryPlot) chart.getPlot();// 获取X轴CategoryAxis categoryAxis = (CategoryAxis) categoryPlot.getDomainAxis();// 获取Y轴NumberAxis numberAxis = (NumberAxis) categoryPlot.getRangeAxis();// 处理X轴上的文字categoryAxis.setTickLabelFont(new Font("宋体", Font.BOLD, 12));// 处理X轴外的文字categoryAxis.setLabelFont(new Font("宋体", Font.BOLD, 12));// 处理Y轴上的文字numberAxis.setTickLabelFont(new Font("宋体", Font.BOLD, 15));// 处理Y轴外的文字numberAxis.setLabelFont(new Font("宋体", Font.BOLD, 15));// 处理Y轴上显示的刻度，以5000作为1格numberAxis.setAutoTickUnitSelection(false);NumberTickUnit unit = new NumberTickUnit(5000);numberAxis.setTickUnit(unit);// 获取绘图区域LineAndShapeRenderer lineAndShapeRenderer = (LineAndShapeRenderer) categoryPlot.getRenderer();// 在图形上显示数字lineAndShapeRenderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());lineAndShapeRenderer.setBaseItemLabelsVisible(true);lineAndShapeRenderer.setBaseItemLabelFont(new Font("宋体", Font.BOLD, 10));// 在图形上添加转折点（小矩形）Rectangle shape = new Rectangle(5, 5);for (int i = 0; i < datasetSize; i++) {lineAndShapeRenderer.setSeriesShape(i, shape);lineAndShapeRenderer.setSeriesShapesVisible(i, true);}
}
}

至此，柱状图，饼状图，折线图就制作完毕了，

五、效果图
柱状图

饼形图

折线图

六.结语
楼主使用的是spring+springMVC+MyBatiskuang框架。
其实这行图形的制作在第三方包Jfreechart已经提供给我们了。只需要按照的它给的规范，根据自己需求设计就可以了。就像excel的导入导出,poi就是帮助我们做个事情的。
新手上路，如果问题，请多多包含。如有问题，欢迎留言。

Web在jsp页面中生成柱状图，折线图，饼状图相关推荐

【在web项目jsp页面自动生成二维码功能】
在web项目jsp页面自动生成二维码功能原文: http://www.cnblogs.com/gczmn/. https://www.jq22.com/jquery-info294/. 先将下面的文 ...
在vue中使用antV-G2展示半径饼状图
介绍在vue中使用antV-G2展示半径饼状图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
MPAndroidChart 折线图饼状图条形图最简单使用方式（kotlin）
首先,我是一个小白,最近做安卓,突然碰到需要做一个饼状图一个折线图一个条形图显示出来,没有什么要求,只要能显示出来就可以,既然这样的话,那我就需要找到这三个图最简单的实现方式,发现使用MPAndr ...
canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
在vue中使用antV-G2展示基础饼状图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
Qt绘制柱状图BarChart、饼状图PieChart、堆叠柱状图StackedChart、散点图ScatterChart
一.效果展示二.工程中添加charts模块三.在工程布局文件中放一块Graphics View,然后右键提升为QChartView,每个Tab都一样.如下图四.更改控件名,如下图所示五.Mai ...
python中输出手机话费_用Python生成柱状图、折线图、饼状图来统计自己的手机话费...
环境 macOS PyCharm 依赖库 matplotlib numpy 中文字体步骤详解一.配置依赖包使用pycharm,直接依赖 matplotlib,如果当前环境变量的pip中不包含 m ...
如何在ppt中生成柱状图_ppt中如何添加柱状图 - 卡饭网
在word文档中怎么添加柱状图?word制作柱状图方法介绍在word文档中怎么添加柱状图?word制作柱状图方法介绍我们在编辑word文档的时候,往往需要插入一些柱状图之类的图形,展示出多姿多彩的 ...
Poi 如何使用Java和POI技术生成折线图，柱状图，饼状图导出到word文档
这篇文章主要介绍POI生成图表并导出word文档的基本操作.主要介绍三种图表:折线图.柱状图.饼状图. 一.效果展示使用Java和POI技术生成的折线图,柱状图,饼状图的效果如下图所示: 二.环境准 ...

Web在jsp页面中生成柱状图，折线图，饼状图

Web在jsp页面中生成柱状图，折线图，饼状图相关推荐

最新文章

热门文章