Web在jsp頁面中生成柱狀圖，折線圖，餅狀圖

阿新 • • 發佈：2019-01-12

一、前言

    在實際開發過程中，柱狀圖，折線圖，餅狀圖在一些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.jsp
    String 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
          柱狀圖資料
 // @return

public 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 chart

private 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頁面中生成柱狀圖，折線圖，餅狀圖

一、前言在實際開發過程中，柱狀圖，折線圖，餅狀圖在一些OA，ERP中是非常常見的功能，特別是需求方是業務型，資料分析型公司，下面的例子簡單實現了餅狀圖，柱狀圖，折線圖在jsp中生成。（ps:新手上路，不喜勿噴）二、前期準備 1.使用的框架：s

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

關於H5頁面中生成圖片的兩種方式！

ima 前端不能圖片項目自定義 dom對象技術分享 ron 前言：我們在做項目過程中，經常會遇到自定義生成一張圖片並可以長按保存。長按保存圖片在微信等瀏覽器中默認就有，那麽對於生成圖片的有哪些方式呢？方法一：利用canvas繪制圖形，然後生成圖片代碼如下：

測試引入的js檔案，和直接在頁面中寫的js程式碼執行的順序，順便還有個疑問(即JavaScript中變數宣告有var和沒var的區別)

測試引入的js檔案，和直接在頁面中寫的js程式碼執行的順序，順便還有個疑問(即JavaScript中變數宣告有var和沒var的區別)，有時間再倒回來理解這個問題 <!DOCTYPE html> <html> <head> <meta charset

在同一個頁面中多次使用swiper 輪播外掛，要避免相互影響

在專案中使用輪播是很常見的，swiper 就是其中之一，pc 端，移動端都可以使用，效果還是不錯的；曾經在寫一個頁面的時候，其中有兩個輪播圖，於是都用swiper 來寫了，寫完之後發現顯示的效果不是預期的效果，有很大的問題；後來檢查發現兩個輪播圖相互影響了，樣式啥的衝突了，因

H5頁面中的視訊輪播（類似於banner輪播圖效果）

先說下我的需求，如下圖：手機模型中間部分是視訊播放，當一條視訊播放完畢後，整屏會自動上滑切換到下一個視訊。提起輪播，我們看到的最多的就是banner輪播圖，而提起輪播圖，我會馬上想起用Swiper。一開始為了快速開發，就想著用swiper來實

【JavaScript】怎樣在 js 中生成指定值、個數的陣列，包含相同元素的陣列

在刷演算法題的過程中，往往會需要設定 n 個 0 元素的陣列，例如 var a = [0,0,0,0, ... ,0]; 少一點，固定個數，可能就自己填了，但是多了，就不那麼容易處理了。查閱相

在servlet中獲取jsp頁面中選中的複選框的值，並對其值進行操作。

jsp部分程式碼:<input type="checkbox" name="checkboxs" value="${stuInfo.sid}"/>動態的為複選框賦值servlet程式碼：String[] ids = request.getParameterValu

記一次非常無語的生成柱狀圖，js，ecshop。

width ecs fun ner text nbsp real mov span 如題，無語且非常郁悶。要求是根據查詢出來的數據動態生成柱狀圖。但是ecshop的查詢ajax回調都是已經封裝好了的。根本就不能改。無奈之下只好百度了一個畫柱狀圖的代碼，每隔2秒

關於安卓專案中統計資料achartengine類（包括餅狀圖，柱狀圖，折線圖等）的使用

最近由於專案中需要統計資料，通過比較直觀的方式展示給使用者，所以就抽時間學習了一個統計圖的類庫achartengine，裡面包含統計中所需的餅狀圖，柱狀圖，折線圖等等，所以就拿出來給大家分享一下，希望大家相互學習，如有不足之處

使用ECharts實現各種資料統計圖（餅圖，柱狀圖，折線圖）在javaWeb中的應用

具體的資源及頁面程式碼可下載 http://download.csdn.net/download/dll322/9912507 準備工作：要下載ECharts的原始檔第一步：在web端既新建一個jsp頁面第二步：引入ECharts的js 第三步：為EChart

echatrs同一個頁面多圖表展示，柱狀圖，折線圖，油表，地圖……

/* 卸車時間 */function drawUninstall(ec) {var myBarChart = ec.init(document.getElementById('uninstallGoods'));var option1 = {backgroundColor : '#1B1B1B',title

在echarts中，柱狀圖、折線圖來回切換以及儲存為圖片的屬性

在setOption裡直接定義。 toolbox: {show: true,feature: {magicType: {type: ['line', 'bar'],show: false},dataZ

Java讀取數據庫數據生成柱狀圖

idl false create 統計引入 chart console splay 數據此案例是用swing顯示數據的。須要引入jfreechart相關包。不同版本號可能包不同樣。本人用的是此案例在ssi框架下會報錯，不用框架就沒問題。 Java後臺邏輯代碼： p

柱形圖，餅狀圖JavaScript

column 註意文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

JavaScript數據可視化編程學習（一）Flotr2，包含簡單的，柱狀圖，折線圖，餅圖，散點圖

基礎沒有 cat 勝利而是 5.4 最好的表數據聯系一、基礎柱狀圖二、基礎的折線圖三、基礎的餅圖四、基礎的散點圖一、基礎柱狀圖如果你還沒有想好你的數據用什麽類型的圖表來展示你的數據，你應該首先考慮是否可以做成柱狀圖。柱狀圖可以表示數據的

Thinkphp+ECharts生成柱狀圖

document ntb .com 邊框 blog 引入類目 src end 1.首先進ECharts官網下載echarts.js 點擊下載，結合TP5講解，主要代碼在js裏面，更多請到ECharts官網 2.引進echarts.js <!DOCTYPE htm

ECharts 報表事件聯動系列三：柱狀圖，餅狀圖實現聯動

餅狀圖 img and int js函數 radius func get 執行源碼如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

如何使用Jfreechart生成柱狀圖？

lai ans *** clas ldp 成了 get nts cal JFreeChart是JAVA平臺上的一個開放的圖表繪制類庫。首先 (http://www.jfree.org /jfreechart) 總這個網址下載所需要的庫，然後解壓，放在某個地方。我們默認的

PHP jpgraph庫的配置及生成統計圖表:折線圖、柱狀圖、餅狀圖等

此文為轉載，僅作儲存文件使用，轉自：http://blog.csdn.net/aoshilang2249/article/details/46956163 注意：原文中提到配置php.ini中的include_path,親測不需要配置（gd2需要開啟），只需要將下載的檔案引入專案即可

Web在jsp頁面中生成柱狀圖，折線圖，餅狀圖

相關推薦