Java导出Highcharts生成的图表为图片源码

 

Java导出Highcharts生成的图表为图片源码

需要的jar包:

需要的js文件:(可以通过http://www.highcharts.com/download下载highcharts对应的js文件)

下面是一些主要部分

web.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.5"   
3.     xmlns="http://java.sun.com/xml/ns/javaee"   
4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
7.   <servlet>  
8.     <description>This is the description of my J2EE component</description>  
9.     <display-name>This is the display name of my J2EE component</display-name>  
10.     <servlet-name>SaveAsImage</servlet-name>  
11.     <servlet-class>com.foxconn.highcharts.demo.SaveAsImage</servlet-class>  
12.   </servlet>  
13.   
14.   <servlet-mapping>  
15.     <servlet-name>SaveAsImage</servlet-name>  
16.     <url-pattern>/SaveAsImage</url-pattern>  
17.   </servlet-mapping>  
18.   <welcome-file-list>  
19.     <welcome-file>basic_line.jsp</welcome-file>  
20.   </welcome-file-list>  
21. </web-app>  

servlet部分

[java]  view plain copy

1. package com.foxconn.highcharts.demo;  
2.   
3. import java.io.IOException;  
4. import java.io.OutputStreamWriter;  
5. import java.io.StringReader;  
6.   
7. import javax.servlet.ServletException;  
8. import javax.servlet.ServletOutputStream;  
9. import javax.servlet.http.HttpServlet;  
10. import javax.servlet.http.HttpServletRequest;  
11. import javax.servlet.http.HttpServletResponse;  
12.   
13. import org.apache.batik.transcoder.Transcoder;  
14. import org.apache.batik.transcoder.TranscoderException;  
15. import org.apache.batik.transcoder.TranscoderInput;  
16. import org.apache.batik.transcoder.TranscoderOutput;  
17. import org.apache.batik.transcoder.image.JPEGTranscoder;  
18. import org.apache.batik.transcoder.image.PNGTranscoder;  
19. //import org.apache.fop.svg.PDFTranscoder;  
20.   
21.   
22.   
23.   
24. public class SaveAsImage extends HttpServlet {  
25.   
26.     /** 
27.      *  
28.      */  
29.     private static final long serialVersionUID = 1L;  
30.   
31.     /** 
32.      * Constructor of the object. 
33.      */  
34.     public SaveAsImage() {  
35.         super();  
36.     }  
37.   
38.     /** 
39.      * Destruction of the servlet. <br> 
40.      */  
41.     public void destroy() {  
42.         super.destroy(); // Just puts "destroy" string in log  
43.     }  
44.   
45.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
46.             throws ServletException, IOException {  
47.         doPost(request, response);  
48.     }  
49.       
50.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
51.             throws ServletException, IOException {  
52.   
53.         /*导成pdf做了很久，但还是没能做出来，因为一直报 
54.         * java.lang.NoSuchMethodError: org.apache.avalon.framework.configuration.DefaultConfiguration.<init>(Ljava/lang/String;)V的错误， 
55.         * 如果你知道如何解决这个错误，请告诉我一下，在此先谢过了。现在已经可以正确地将图片导成pdf了，程序是没有问题的 
56.         * */  
57.         request.setCharacterEncoding("utf-8");//设置编码，解决乱码问题  
58.         String type = request.getParameter("type");  
59.         String svg = request.getParameter("svg");  
60.         String filename = request.getParameter("filename");  
61.         filename = filename==null?"chart":filename;  
62.         ServletOutputStream out = response.getOutputStream();  
63.         if (null != type && null != svg) {  
64.             svg = svg.replaceAll(":rect", "rect");  
65.             String ext = "";  
66.             Transcoder t = null;  
67.             if (type.equals("image/png")) {  
68.                 ext = "png";  
69.                 t = new PNGTranscoder();  
70.             } else if (type.equals("image/jpeg")) {  
71.                 ext = "jpg";  
72.                 t = new JPEGTranscoder();  
73.             } else if (type.equals("application/pdf")) {  
74.                 ext = "pdf";  
75.                 t =(Transcoder) new PDFTranscoder();//我将这儿的注释去掉了，因为导成pdf的问题已经解决  
76.             } else if(type.equals("image/svg+xml"))   
77.                 ext = "svg";     
78.             response.addHeader("Content-Disposition", "attachment; filename="+ filename + "."+ext);  
79.             response.addHeader("Content-Type", type);  
80.               
81.             if (null != t) {  
82.                 TranscoderInput input = new TranscoderInput(new StringReader(svg));  
83.                 TranscoderOutput output = new TranscoderOutput(out);  
84.                   
85.                 try {  
86.                     t.transcode(input, output);  
87.                 } catch (TranscoderException e) {  
88.                     out.print("Problem transcoding stream. See the web logs for more details.");  
89.                     e.printStackTrace();  
90.                 }  
91.             } else if (ext.equals("svg")) {  
92.             //  out.print(svg);  
93.                 OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");  
94.                 writer.append(svg);  
95.                 writer.close();  
96.             } else   
97.                 out.print("Invalid type: " + type);  
98.         } else {  
99.             response.addHeader("Content-Type", "text/html");  
100.             out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +  
101.                     "\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");  
102.         }  
103.         out.flush();  
104.         out.close();  
105.     }  
106.   
107.     /** 
108.      * Initialization of the servlet. <br> 
109.      * 
110.      * @throws ServletException if an error occurs 
111.      */  
112.     public void init() throws ServletException {  
113.         // Put your code here  
114.     }  
115.   
116. }  

jsp

[html]  view plain copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7. <title>Basic Line</title>  
8. <script src="js/jquery.min.js" type="text/javascript"></script>  
9.     <script src="js/excanvas.compiled.js" type="text/javascript"></script>  
10.     <script src="js/highcharts.js" type="text/javascript"></script>  
11.       
12.     <script src="js/highcharts.src.js" type="text/javascript"></script>  
13.     <script type="text/javascript" src="js/exporting.js"></script>  
14.     <script type="text/javascript">  
15.         var chart;  
16.         $(document).ready(function(){  
17.             chart = new Highcharts.Chart({  
18.                 chart: {  
19.                     renderTo: 'container',  
20.                     defaultSeriesType: 'line',  
21.                     marginRight: 130,  
22.                     marginBottom: 25  
23.             },  
24.             title: {  
25.                 text: 'Monthly Average Temperature',  
26.                 x: -20    //center  
27.             },  
28.             subtitle: {  
29.                 text: '测试中文乱码',  
30.                 x: -20  
31.             },  
32.             xAxis: {  
33.                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
34.                                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
35.             },  
36.             yAxis: {  
37.                 title: {  
38.                     text: 'Temperature (°C)'  
39.                 },  
40.                 plotLines: [{  
41.                     value: 0,  
42.                     width: 1,  
43.                     color: '#808080'  
44.                 }]  
45.             },  
46.             exporting:{  
47.                 filename:'chart',  
48.                 url:'http://localhost:8080/HighChartsDemo/SaveAsImage'//这里是一个重点哦,也可以修改exporting.js中对应的url  
49.             },  
50.             tooltip: {  
51.                 formatter: function(){  
52.                     return '<b>' + this.series.name + '</b><br/>' +  
53.                     this.x + ': ' + this.y + '°C';  
54.                 }  
55.             },  
56.             legend: {  
57.                 layout: 'vertical',  
58.                 align: 'right',  
59.                 verticalAlign: 'middle',  
60.                 x: 10,  
61.                 y: 100,  
62.                 borderWidth: 0  
63.             },  
64.             series: [{  
65.                 name: 'Tokyo',  
66.                 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  
67.             },{  
68.                 name: 'New York',  
69.                 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]  
70.             },{  
71.                 name: 'Berlin',  
72.                 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]  
73.             },{  
74.                 name: 'London',  
75.                 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]  
76.             }]  
77.             });  
78.         });  
79.     </script>  
80. </head>  
81. <body>  
82.     <div id="container" style="width: 100%; height: 400px"></div>  
83. </body>  
84. </html>