將FusionCharts導出爲圖片、PDF、Excel

本文轉自互聯網javascript

本文的思路:php

(1)準備一個Java Web項目html

(2)將FusionCharts加入到項目java

(3)將FusionChart輸出爲圖片、PDF、Excelnode

 

環境:jquery

操做系統:Windows 8.1 企業版web

開發環境:MyEclipse 2015 Stable 2.0ajax

 

一、準備JavaWeb項目json

FusionCharts能夠接受JSON、XML類型的數據,而JSON類型的數據相對比較簡單,所以咱們準備的JavaWeb項目可以提供返回JSON數據的能力。windows

 

1.一、新建Web Project

添加一個Web Project,項目名稱設置爲「oa」。

wKioL1fKzX6jeVxlAAepPTHhFAI763.gif

 

項目下的文件目錄結構:

wKiom1fK1MXzYCh9AAAVjCtL384626.png

 

1.二、添加ChartData.java文件

放置到src目錄內的com.rk.entity包下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
package  com.rk.entity;
 
import  java.util.ArrayList;
import  java.util.List;
 
public  class  ChartData {
     private  String label;
     private  Object value;
     
     public  ChartData() {
     }
     public  ChartData(String label, Object value) {
         this .label = label;
         this .value = value;
     }
 
     public  static  List<ChartData> getExample(){
         List<ChartData> list =  new  ArrayList<ChartData>();
         list.add( new  ChartData( "Jan" "420000" ));
         list.add( new  ChartData( "Feb" "810000" ));
         list.add( new  ChartData( "Mar" "720000" ));
         list.add( new  ChartData( "Apr" "550000" ));
         list.add( new  ChartData( "May" "910000" ));
         list.add( new  ChartData( "Jun" "510000" ));
         list.add( new  ChartData( "Jul" "680000" ));
         list.add( new  ChartData( "Aug" "620000" ));
         list.add( new  ChartData( "Sep" "610000" ));
         list.add( new  ChartData( "Oct" "490000" ));
         list.add( new  ChartData( "Nov" "900000" ));
         list.add( new  ChartData( "Dec" "730000" ));
         return  list;
     }
     
     public  String getLabel() {
         return  label;
     }
     public  void  setLabel(String label) {
         this .label = label;
     }
     public  Object getValue() {
         return  value;
     }
     public  void  setValue(Object value) {
         this .value = value;
     }
     @Override
     public  String toString() {
         return  "Chart [label="  + label +  ", value="  + value +  "]" ;
     }
}

 

1.三、添加轉換JSON的工具類

(1)添加gson-2.6.2.jar到WebRoot/WEB-INF/lib目錄下

(2)在com.rk.utils包下添加JsonResult.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package  com.rk.utils;
 
import  com.google.gson.Gson;
import  com.google.gson.GsonBuilder;
 
public  class  JsonResult {
     private  String status;
     private  Object data;
     public  String getStatus() {
         return  status;
     }
     public  void  setStatus(String status) {
         this .status = status;
     }
     public  Object getData() {
         return  data;
     }
     public  void  setData(Object data) {
         this .data = data;
     }
     @Override
     public  String toString() {
         Gson gson =  new  GsonBuilder().create();
         return  gson.toJson( this );
     }
     
}

 

1.四、添加Servlet

(1)在com.rk.web包下添加JsonDataServlet.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package  com.rk.web;
 
import  java.io.IOException;
import  java.util.List;
 
import  javax.servlet.ServletException;
import  javax.servlet.ServletOutputStream;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
 
import  com.rk.entity.ChartData;
import  com.rk.utils.JsonResult;
 
public  class  JsonDataServlet  extends  HttpServlet {
 
     @Override
     protected  void  doGet(HttpServletRequest request, HttpServletResponse response)  throws  ServletException, IOException {
         this .doPost(request, response);
     }
 
     @Override
     protected  void  doPost(HttpServletRequest request, HttpServletResponse response)  throws  ServletException, IOException {
         //一、設置輸出格式爲JSON
         response.setContentType( "application/json;charset=utf-8" );
         //二、輸出
         //2.一、準備JSON數據
         List<ChartData> list = ChartData.getExample();
         JsonResult result =  new  JsonResult();
         result.setStatus( "ok" );
         result.setData(list);
         String strJson = result.toString();
         //2.二、輸出JSON數據
         ServletOutputStream outputStream = response.getOutputStream();
         outputStream.write(strJson.getBytes( "utf-8" ));
     }
}

(2)在web.xml中對JsonDataServlet類進行註冊

1
2
3
4
5
6
7
8
< servlet >
     < servlet-name >JsonDataServlet</ servlet-name >
     < servlet-class >com.rk.web.JsonDataServlet</ servlet-class >
</ servlet >
< servlet-mapping >
     < servlet-name >JsonDataServlet</ servlet-name >
     < url-pattern >/getJsonData</ url-pattern >
</ servlet-mapping >

完整的web.xml文件以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<? xml  version = "1.0"  encoding = "UTF-8" ?>
< web-app  xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"  xmlns = "http://java.sun.com/xml/ns/javaee"  xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"  id = "WebApp_ID"  version = "3.0" >
   < display-name >oa</ display-name >
   < welcome-file-list >
     < welcome-file >index.jsp</ welcome-file >
   </ welcome-file-list >
  
     < servlet >
         < servlet-name >JsonDataServlet</ servlet-name >
         < servlet-class >com.rk.web.JsonDataServlet</ servlet-class >
     </ servlet >
     < servlet-mapping >
         < servlet-name >JsonDataServlet</ servlet-name >
         < url-pattern >/getJsonData</ url-pattern >
     </ servlet-mapping >
</ web-app >

 

1.五、測試返回JSON數據是否正常

訪問地址:

1
http://127.0.0.1:8080/oa/getJsonData

若是可以返回JSON數據,則表示 正常

效果圖

wKioL1fK0wHC3M00AAG8ZYOvrsk604.gif

 

 

二、將FusionCharts加入到JavaWeb項目中

 

2.一、準備index.jsp

將原有的index.jsp修改一下,HTML代碼以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < title >統計圖表</ title >
     < meta  http-equiv = "pragma"  content = "no-cache" >
     < meta  http-equiv = "cache-control"  content = "no-cache" >
     < meta  http-equiv = "expires"  content = "0" >    
   </ head >
   
   < body >
     < div  id = "chartContainer" >FusionCharts XT will load here!</ div >
   </ body >
</ html >

 

2.二、添加js文件到項目當中

添加如下4個js文件到項目WebRoot/js目錄下

jquery-1.12.3.js

fusioncharts.charts.js

fusioncharts.js

fusioncharts.theme.fint.js

目錄結構圖以下:

wKioL1fK1eez_TrSAAAVhoc1hwY555.png

 

2.三、將js文件引入到index.jsp文件中

1
2
3
< script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/jquery/jquery-1.12.3.js" ></ script >    
< script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/fusioncharts.js" ></ script >    
< script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/themes/fusioncharts.theme.fint.js" ></ script >

完整的index.jsp以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < title >統計圖表</ title >
     < meta  http-equiv = "pragma"  content = "no-cache" >
     < meta  http-equiv = "cache-control"  content = "no-cache" >
     < meta  http-equiv = "expires"  content = "0" >
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/jquery/jquery-1.12.3.js" ></ script >    
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/fusioncharts.js" ></ script >    
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/themes/fusioncharts.theme.fint.js" ></ script >    
   </ head >
   
   < body >
     < div  id = "chartContainer" >FusionCharts XT will load here!</ div >
   </ body >
</ html >

 

2.四、使用jQuery AJAX獲取數據,並渲染FusionCharts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
     <script type= "text/javascript" >
         //頁面加載完成後,從服務器獲取數據
         $(document).ready( function (){
             $.ajax({
                 url: "${pageContext.request.contextPath}/getJsonData" ,
                 type: "post" ,
                 dataType: "json" ,
                 success: function (result){
                     if (result.status ==  "ok" ){ displayFusionChart(result.data); }
                     else { alert( "數據出錯!" ); }
                 },
                 error: function (){ alert( "AJAX通訊失敗!" ); }
             });
         });
         //顯示FusionCharts
         function  displayFusionChart(chartData){
             var  revenueChart =  new  FusionCharts({
                 "type" "column2d" ,
                 "renderAt" "chartContainer" ,
                 "width" "500" ,
                 "height" "300" ,
                 "dataFormat" "json" ,
                 "dataSource" : {
                   "chart" : {
                       "caption" "Monthly revenue for last year" ,
                       "subCaption" "Harry's SuperMart" ,
                       "xAxisName" "Month" ,
                       "yAxisName" "Revenues (In USD)" ,
                       "theme" "fint"
                    },
                   "data" : chartData
                 }
             });
 
             revenueChart.render();
         }
     </script>

 

完整的index.jsp以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < title >統計圖表</ title >
     < meta  http-equiv = "pragma"  content = "no-cache" >
     < meta  http-equiv = "cache-control"  content = "no-cache" >
     < meta  http-equiv = "expires"  content = "0" >
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/jquery/jquery-1.12.3.js" ></ script >    
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/fusioncharts.js" ></ script >    
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/themes/fusioncharts.theme.fint.js" ></ script >
     < script  type = "text/javascript" >
         //頁面加載完成後,從服務器獲取數據
         $(document).ready(function(){
             $.ajax({
                 url:"${pageContext.request.contextPath}/getJsonData",
                 type:"post",
                 dataType:"json",
                 success:function(result){
                     if(result.status == "ok"){ displayFusionChart(result.data); }
                     else{ alert("數據出錯!"); }
                 },
                 error:function(){ alert("AJAX通訊失敗!"); }
             });
         });
         //顯示FusionCharts
         function displayFusionChart(chartData){
             var revenueChart = new FusionCharts({
                 "type": "column2d",
                 "renderAt": "chartContainer",
                 "width": "500",
                 "height": "300",
                 "dataFormat": "json",
                 "dataSource": {
                   "chart": {
                       "caption": "Monthly revenue for last year",
                       "subCaption": "Harry's SuperMart",
                       "xAxisName": "Month",
                       "yAxisName": "Revenues (In USD)",
                       "theme": "fint"
                    },
                   "data": chartData
                 }
             });
 
             revenueChart.render();
         }
     </ script >    
   </ head >
   
   < body >
     < div  id = "chartContainer" >FusionCharts XT will load here!</ div >
   </ body >
</ html >

 

2.五、測試FusionCharts是否正常顯示

訪問地址:

1
http://127.0.0.1:8080/oa/index.jsp

若是正常顯示出圖表,則表示 正常。

效果圖以下:

wKioL1fK2QSROyxkAAJxf-Uolk4616.gif

 

 

 

三、將FusionCharts輸出爲圖片、PDF、Excel

 

3.一、打開FusionCharts的輸出功能

打開index.jsp文件,在建立FusionCharts對象的chart屬性中添加exportEnabled屬性。

1
2
                       //開啓FusionCharts的輸出功能
                       "exportEnabled" : "1" ,

以下圖:

wKioL1fK2pvB_SxPAABphduMHg8676.png

 

完整的index.jsp以下,能夠看下相關的java視頻

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < title >統計圖表</ title >
     < meta  http-equiv = "pragma"  content = "no-cache" >
     < meta  http-equiv = "cache-control"  content = "no-cache" >
     < meta  http-equiv = "expires"  content = "0" >
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/jquery/jquery-1.12.3.js" ></ script >    
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/fusioncharts.js" ></ script >    
     < script  type = "text/javascript"  src = "${pageContext.request.contextPath}/js/fusioncharts/themes/fusioncharts.theme.fint.js" ></ script >
     < script  type = "text/javascript" >
         //頁面加載完成後,從服務器獲取數據
         $(document).ready(function(){
             $.ajax({
                 url:"${pageContext.request.contextPath}/getJsonData",
                 type:"post",
                 dataType:"json",
                 success:function(result){
                     if(result.status == "ok"){ displayFusionChart(result.data); }
                     else{ alert("數據出錯!"); }
                 },
                 error:function(){ alert("AJAX通訊失敗!"); }
             });
         });
         //顯示FusionCharts
         function displayFusionChart(chartData){
             var revenueChart = new FusionCharts({
                 "type": "column2d",
                 "renderAt": "chartContainer",
                 "width": "500",
                 "height": "300",
                 "dataFormat": "json",
                 "dataSource": {
                   "chart": {
                       "caption": "Monthly revenue for last year",
                       "subCaption": "Harry's SuperMart",
                       "xAxisName": "Month",
                       "yAxisName": "Revenues (In USD)",
                       //開啓FusionCharts的輸出功能
                       "exportEnabled":"1",
                       "theme": "fint"
                    },
                   "data": chartData
                 }
             });
 
             revenueChart.render();
         }
     </ script >    
   </ head >
   
   < body >
     < div  id = "chartContainer" >FusionCharts XT will load here!</ div >
   </ body >
</ html >

 

3.二、從新訪問index.jsp,查看輸出功能

 

在聯網的狀況下,是以下效果

wKioL1fK3vDxYqaYAASuQ5Q4RLw196.gif

 

在不聯網的狀況下,是以下效果

wKiom1fK3xaxGnThAALOZv3x1wI903.gif

 

 

原文地址:http://www.fusioncharts.com/dev/exporting-charts/exporting-charts-as-image-and-pdf.html

 

FusionCharts Suite XT uses JavaScript to render charts in the browser using SVG and VML. A prominent feature is the ability to export the rendered charts in the JPG, PNG, SVG, and PDF formats.

The export is done using a server-side helper library that converts the SVG to the required format. VML can also be exported as it is converted to SVG internally before exporting. During the export process, the data to be exported is sent to the FusionCharts servers for processing and generating the output in the required format.

You must have an active internet connection for this feature to work.

To enable server-side exporting, the chart level attribute exportEnabled is set to 1. The  menu button is then visible in the top-right corner of the chart. Click/hover over this menu button to see the dropdown menu with the export options, as shown in the image below:

 

 

 

You must have an active internet connection for this feature to work.

 

經過上面這句話,咱們能夠得知,這須要在聯網的狀況下才能使用導出圖片、PDF的功能。

 

可是,咱們並不會止步如此,咱們的目標是即便在不聯網的狀況也可以導出圖片、PDF、Excel。

 

3.三、不聯網的狀況下,輸出圖片、PDF、Excel

(1)安裝InkscapeImageMagick

Inkscape的下載地址:https://inkscape.org/zh/download/windows/

wKioL1fK44fAKx-wAAEJ7XeWiUA978.png個人電腦是64位的,所以選擇了64-bit Windows installer(msi)

 

 

ImageMagick的下載地址:http://www.imagemagick.org/script/binary-releases.php

wKiom1fK49Oyc7HSAAEYIo83c0k308.png

一樣,我也選擇了x64版本的下載

 

(2)引入jar包

拷貝fusioncharts-suite-xt/export-handlers/java-export-handler目錄下的fcexporter.jar到WebRoot/WEB-INF/lib目錄下

wKiom1fK5LGyytSqAAF5qZFMF3I411.gif

 

(3)在web.xml對jar包中的Servlet類進行註冊和映射

1
2
3
4
5
6
7
8
9
10
< servlet >
     < display-name >FCExporter</ display-name >
     < servlet-name >FCExporter</ servlet-name >
     < servlet-class >com.fusioncharts.exporter.servlet.FCExporter</ servlet-class >
     < load-on-startup >1</ load-on-startup >
</ servlet >
< servlet-mapping >
     < servlet-name >FCExporter</ servlet-name >
     < url-pattern >/exportFusionCharts</ url-pattern >
</ servlet-mapping >   

 

對於url-pattern部分,咱們能夠自定義(後面會用到這個url-pattern)

wKiom1fMjL-zs4EJAAA_h06YIy0612.png

 

完整的web.xml以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<? xml  version = "1.0"  encoding = "UTF-8" ?>
< web-app  xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"  xmlns = "http://java.sun.com/xml/ns/javaee"  xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"  id = "WebApp_ID"  version = "3.0" >
   < display-name >oa</ display-name >
   < welcome-file-list >
     < welcome-file >index.jsp</ welcome-file >
   </ welcome-file-list >
  
     < servlet >
         < servlet-name >JsonDataServlet</ servlet-name >
         < servlet-class >com.rk.web.JsonDataServlet</ servlet-class >
     </ servlet >
     < servlet-mapping >
         < servlet-name >JsonDataServlet</ servlet-name >
         < url-pattern >/getJsonData</ url-pattern >
     </ servlet-mapping >
 
     < servlet >
         < display-name >FCExporter</ display-name >
         < servlet-name >FCExporter</ servlet-name >
         < servlet-class >com.fusioncharts.exporter.servlet.FCExporter</ servlet-class >
         < load-on-startup >1</ load-on-startup >
     </ servlet >
     < servlet-mapping >
         < servlet-name >FCExporter</ servlet-name >
         < url-pattern >/exportFusionCharts</ url-pattern >
     </ servlet-mapping >   
 
</ web-app >

 

 

 

經過配置,咱們逆向推理,在jar當中應該是一個Servlet類。

咱們能夠經過jd-gui軟件對該jar包進行反編譯,以下圖

wKioL1fMjFCS6GHzAABZ1L5B5Co309.png

 

 

 

 

(4)(在後臺)對jar包進行配置

在src目錄下添加fusioncharts_export.properties文件,內容以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Please specify the path to a folder with write permissions
# The exported image/PDF files would be saved here (for Linux based server SAVEPATH should be changed to relative or absolute path accordingly)
SAVEPATH = /JSP/ExportExample/ExportedImages/
 
# This constant HTTP_URI stores the HTTP reference to
# the folder where exported charts will be saved.
# Please enter the HTTP representation of that folder
# in this constant e.g., http://www.yourdomain.com/images/
HTTP_URI = http://localhost:8081/ExportHandler/JSP/ExportExample/ExportedImages/
 
# OVERWRITEFILE sets whether the export handler would overwrite an existing file
# the newly created exported file. If it is set to false the export handler would
# not overwrite. In this case if INTELLIGENTFILENAMING is set to true the handler
# would add a suffix to the new file name. The suffix is a randomly generated UUID.
# Additionally, you can add a timestamp or random number as additional prefix.
FILESUFFIXFORMAT = TIMESTAMP
OVERWRITEFILE = false
INTELLIGENTFILENAMING = true
 
# Set the path of Inkscape here(Only for Windows)
INKSCAPE_PATH = C\:\\Program Files\\Inkscape
 
# Set the path of ImageMagick here(Only for Windows)
IMAGEMAGICK_PATH =C\:\\Program Files\\ImageMagick-7.0.2-Q16

其中,INKSCAPE_PATHIMAGEMAGICK_PATH要寫成實際安裝文件的路徑(其他的值,我未作修改,由於不太清楚是作什麼用的):

1
2
3
4
5
# Set the path of Inkscape here(Only for Windows)
INKSCAPE_PATH = C\:\\Program Files\\Inkscape
 
# Set the path of ImageMagick here(Only for Windows)
IMAGEMAGICK_PATH =C\:\\Program Files\\ImageMagick-7.0.2-Q16

 

(5)(在前臺)對JSP文件進行屬性設置

修改index.jsp文件中建立FusionCharts部分的chart屬性,添加以下內容

1
2
3
                       "exportAtClient":"0",
                       "exportHandler":"http://127.0.0.1:8080/oa/exportFusionCharts",
                       "exportAction":"download",

以下圖:

wKiom1fMjyGQ35hQAACBcGyRQqE007.png這幾個參數的做用以下:

wKioL1fMj06jyWhHAABZ7F0pDBE953.png

(6)再次測試index.jsp,查看輸出結果

注意:在進行測試的時候,若是沒有成功,須要首先清空一下瀏覽器的緩存,再次訪問查看結果。

 

結果以下:

wKioL1fMlPjyTn5dAAqK5myUzsg221.gif

 

在上圖中,咱們看到了圖片的來源是http://127.0.0.1:8080 ,說明是從本地產生的圖片,而不是從fusioncharts的官網獲取的圖片。

 

(7)去除水印

在上圖中的左下角,咱們能夠看到「FusionCharts XT Trial」字樣。若是想去掉它,能夠打開fusioncharts.js,而後將 FusionCharts XT Trial 替換爲 空字符串。

wKiom1fMltDCGQKdAAE54hTX4Ac242.gif

 

清空瀏覽器緩存,再次訪問index.jsp,能夠看到水印不見了。

wKioL1fMlzuiMcS2AAHkOpB5yRI307.gif

相關文章
相關標籤/搜索