最近公司项目中Highcharts技术,花了两天学习了解并应用,导出其实就是原来SVG格式转成各种需要的图片格式,看过一些前辈们的整例,经过实验,可行。把此分享给大家。
Highcharts右上角图片导出功能,也满简单,只需要三步就可以完成:
1:导入JAR包(包括JS和JAVA包)如下图
2.我们在工程中创建一个Servlet类和在web.xml中配置
package com.qhs.highcharts.test;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.io.StringReader;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.batik.transcoder.Transcoder;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.JPEGTranscoder;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.apache.fop.svg.PDFTranscoder;
public class SaveImage extends HttpServlet {
/**
* 构造方法
*/
public SaveImage(){
super();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String type = request.getParameter("type");
String svg = request.getParameter("svg");
String filename = request.getParameter("filename");
filename = (filename == null? "chart" : filename);
ServletOutputStream out = response.getOutputStream();
if(type != null && svg != null){
svg = svg.replaceAll(":rect", "rect");
String ext = "";
Transcoder t = null; //转换
if(type.equals("image/png")){
ext="png";
t = new PNGTranscoder();
}else if(type.equals("image/jpeg")){
ext = "jsp";
t = new JPEGTranscoder();
}else if(type.equals("image/pdf")){
ext = "pdf";
t = new PDFTranscoder();
}else if(type.equals("image/svg+xml")){
ext = "svg";
response.addHeader("Content-Disposition", "attachment;filename=" + filename + "." + ext);
response.addHeader("Content-Type", type);
}
if(t != null){
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out);
try{
t.transcode(input, output);
}catch(TranscoderException e){
out.print("转码问题");
e.printStackTrace();
}
}else if(ext.equals("svg")){
OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");
writer.append(svg);
writer.close();
}else{
out.print("无效 type:" + type);
}
}else{
response.addHeader("Content-Type", "text/html");
out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +
"\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
}
out.flush();
out.close();
}
}
web.xml中配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>SaveImage</servlet-name>
<servlet-class>com.qhs.highcharts.test.SaveImage</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SaveImage</servlet-name>
<url-pattern>/SaveImage</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>highchartsTest.html</welcome-file>
</welcome-file-list>
</web-app>
3.最后就是我们来写Highcharts代码块了。为了清楚点,我用Html引用JS方式
Html块代码:
<!DOCTYPE html>
<html>
<head>
<title>highcharts.html</title>
<meta http-equiv="content-type" content="text/html,charset=UTF-8">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/excanvas.compiled.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/highcharts.src.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript" ></script>
<script type="text/javascript" src="JSText/highchartsTest.js"></script>
</head>
<body>
<div id="container" style="min-widht:400px;height:400px"></div>
</body>
</html>
JS代码块:主要是加上这一块代码:exoirtion{}
$(function(){
$("#container").highcharts({
chart:{
events:{
click:function(event){
var label = this.renderer.label(
'x: ' +
Highcharts.numberFormat(event.xAxis[0].value,2) + ',y: ' +
Highcharts.numberFormat(event.yAxis[0].value,2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
).attr({
fill: Highcharts.getOptions().colors[0],
padding:10,
r: 5,
zIndex:8
}).css({
color:'#FFF'
}).add();
setTimeout(function(){
label.fadeOut();
},1000);
}
}
},
exoirtion:{
filename:'class-booking-chart',
url:'http://localhost:8080/Highcharts/SaveImage'
},
series:[{
data:[20,66,77,15,71,33,54,64,78,11,60,25,78,65,23,78,64,85,25]
}]
});
});
效果: