本文轉自互聯網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」。
項目下的文件目錄結構:
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數據,則表示 正常。
效果圖
二、將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
目錄結構圖以下:
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
|
若是正常顯示出圖表,則表示 正常。
效果圖以下:
三、將FusionCharts輸出爲圖片、PDF、Excel
3.一、打開FusionCharts的輸出功能
打開index.jsp文件,在建立FusionCharts對象的chart屬性中添加exportEnabled屬性。
1
2
|
//開啓FusionCharts的輸出功能
"exportEnabled"
:
"1"
,
|
以下圖:
完整的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,查看輸出功能
在聯網的狀況下,是以下效果
在不聯網的狀況下,是以下效果
原文地址: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
|
You must have an active internet connection for this feature to work.
經過上面這句話,咱們能夠得知,這須要在聯網的狀況下才能使用導出圖片、PDF的功能。
可是,咱們並不會止步如此,咱們的目標是即便在不聯網的狀況也可以導出圖片、PDF、Excel。
3.三、不聯網的狀況下,輸出圖片、PDF、Excel
(1)安裝Inkscape和ImageMagick
Inkscape的下載地址:https://inkscape.org/zh/download/windows/
個人電腦是64位的,所以選擇了64-bit Windows installer(msi)
ImageMagick的下載地址:http://www.imagemagick.org/script/binary-releases.php
一樣,我也選擇了x64版本的下載
(2)引入jar包
拷貝fusioncharts-suite-xt/export-handlers/java-export-handler目錄下的fcexporter.jar到WebRoot/WEB-INF/lib目錄下
(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)
完整的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包進行反編譯,以下圖
|
(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_PATH和IMAGEMAGICK_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",
|
以下圖:
(6)再次測試index.jsp,查看輸出結果
注意:在進行測試的時候,若是沒有成功,須要首先清空一下瀏覽器的緩存,再次訪問查看結果。
結果以下:
在上圖中,咱們看到了圖片的來源是http://127.0.0.1:8080 ,說明是從本地產生的圖片,而不是從fusioncharts的官網獲取的圖片。
(7)去除水印
在上圖中的左下角,咱們能夠看到「FusionCharts XT Trial」字樣。若是想去掉它,能夠打開fusioncharts.js,而後將 FusionCharts XT Trial 替換爲 空字符串。
清空瀏覽器緩存,再次訪問index.jsp,能夠看到水印不見了。