一、前言

在實際開發(fā)過程中，柱狀圖，折線圖，餅狀圖在一些OA，ERP中是非常常見的功能，特別是需求方是業(yè)務型，數據分析型公司，下面的例子簡單實現了餅狀圖，柱狀圖，折線圖在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 {// 在業(yè)務層獲取創(chuàng)建的柱狀圖（此時柱狀圖已經創(chuàng)建完成的）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)業(yè)務層
接口：

public interface ColumnarService { public JFreeChart createColumnarTools();

}

實現接口：

@Service public class ColumnaServicerImp implements ColumnarService {//從柱狀圖工具類里面獲取創(chuàng)建的Columnar柱狀圖public JFreeChart createColumnarTools() {// TODO Auto-generated method stub// 獲得數據CategoryDataset dataset = getDataSet();// 獲取柱狀圖工具類創(chuàng)建的柱狀圖，（將數據集傳入）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 {//創(chuàng)建一個柱狀圖//@param dataset柱狀圖數據// @returnpublic static JFreeChart createCoColumnar(CategoryDataset dataset) {// 創(chuàng)建柱狀圖JFreeChart chart = ChartFactory.createBarChart3D("各個項目評分統(tǒng)計", // 圖表標題"項目名", // 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能夠顯示了。
后面就是餅狀圖和折線圖的工具類和業(yè)務層了。 controller就不在贅述了，跟柱狀圖是一樣的

2.餅狀圖

（1） 業(yè)務層

@Service public class PieServiceImp implements PieService { /*** 從餅狀圖工具類里面獲取創(chuàng)建的Columnar柱狀圖*/ public JFreeChart createPieTools() {// TODO Auto-generated method stub// 獲取餅狀圖的數據集DefaultPieDataset dataset = getDataSet();// 獲取餅狀圖工具類創(chuàng)建的餅狀圖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 { /*** 創(chuàng)建餅狀圖* @param dataset 餅狀圖數據源* @return*/ public static JFreeChart createPie(DefaultPieDataset dataset){//創(chuàng)建餅狀圖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));//獲取圖表區(qū)域對象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)業(yè)務層

@Service public class FoldLineServiceImp implements FoldLineService{/*** 從折線圖工具類中獲取創(chuàng)建完成的折線圖*/ public JFreeChart createFoldLineTools() {// TODO Auto-generated method stub//獲取折線圖數據源DefaultCategoryDataset dataset=getDataSet();//從折線圖工具類中獲取創(chuàng)建完成的折線圖JFreeChart chart=FoldLineTools.createFoldLine(dataset);return chart; } /*** 為折線圖創(chuàng)建數據* @return*/ public static DefaultCategoryDataset getDataSet(){//創(chuàng)建數據集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 { /*** 創(chuàng)建一個折線圖* * @return*/ public static JFreeChart createFoldLine(DefaultCategoryDataset dataset) {JFreeChart chart = ChartFactory.createLineChart("業(yè)績分析", "月份", "業(yè)績（元）",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));// 獲取圖表區(qū)域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);// 獲取繪圖區(qū)域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已經提供給我們了。只需要按照的它給的規(guī)范，根據自己需求設計就可以了。就像excel的導入導出,poi就是幫助我們做個事情的。
新手上路，如果問題，請多多包含。如有問題，歡迎留言。

總結

以上是生活随笔為你收集整理的Web在jsp页面中生成柱状图，折线图，饼状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。