Highcharts导出图片

概述:

Highcharts是在做项目涉及到统计图的时候大家的首选,同时也会用到highcharts的export功能,将统计图导出为图片,刚好,最近也遇到了这样的事情,总结出来,以备后用。

导出方式:

highcharts导出图片实现有三种:highcharts服务器导出、局域网服务器导出、本地后台导出。

首先,highcharts服务器导出是默认的导出方式,不需要任何操作,只需在chart中配置export参数即可,但是这种导出方式需要联网;

其次,局域网服务器导出,需要在局域网内配置导出的服务器,可参考http://www.highcharts.com/docs/export-module/setting-up-the-server进行配置;

最后,本地后台导出,既不需要联网,也不需要局域网服务器,直接在后台写对应的servlet即可,是本文讲解的重点内容。

导出原理:

Highcharts图表导出(或下载)本质上是将SVG代码转换为不同文件格式的过程,用到的工具是batik,所以所谓导出服务器,只不过是调用batik,将SVG代码转换并下载。参见下图:

在Java中通过SVG生成图片的代码如下:

package com.lzugis.demo;

import java.io.FileOutputStream;
import java.io.OutputStream;
import java.io.StringReader;

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;

public class CreateImg {
	public static void main(String[] args) throws Exception {
		String svg = "<svg height=\"200\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"10,10 75,150 150,60\" style=\"fill:#63BCF7;stroke:black;stroke-width:3\"/></svg>";
		String type="image/png";	
		String filename="svg";
		if (null != type && null != svg) {
			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 = "jpg";
				t = new JPEGTranscoder();
		    }
		    if (null != t) {
		    	OutputStream out = new FileOutputStream("D:\\"+filename+"."+ext);
		    	TranscoderInput input = new TranscoderInput(new StringReader(svg));
				TranscoderOutput output = new TranscoderOutput(out);
				try{
				    t.transcode(input, output);
				    System.out.println("out");
				} 
				catch (TranscoderException e) {
				    e.printStackTrace();
				}
		    }
		}
	}
}

生成后图片效果如下:

在web中,servlet的编写代码如下:

package com.lzugis.demo;

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;

public class SaveAsImage extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public SaveAsImage() {
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}
	
	public 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 (null != type && null != svg) {
		    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 = "jpg";
				t = new JPEGTranscoder();
		    }
		    else if(type.equals("image/svg+xml")) 
	            ext = "svg";   
		    response.addHeader("Content-Disposition", "attachment; filename="+ filename + "."+ext);
		    response.addHeader("Content-Type", type);
		    
		    if (null != t) {
				TranscoderInput input = new TranscoderInput(new StringReader(svg));
				TranscoderOutput output = new TranscoderOutput(out);
				
				try {
				    t.transcode(input, output);
				} catch (TranscoderException e) {
				    out.print("Problem transcoding stream. See the web logs for more details.");
				    e.printStackTrace();
				}
		    } else if (ext.equals("svg")) {
		    	OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");
		    	writer.append(svg);
		    	writer.close();
		    } else 
		    	out.print("Invalid 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();
	}

	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException {
		// Put your code here
	}

}

web.xml中的servlet的配置如下:

  <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>SaveAsImage</servlet-name>
    <servlet-class>com.foxconn.highcharts.demo.SaveAsImage</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>SaveAsImage</servlet-name>
    <url-pattern>/SaveAsImage</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>basic_line.jsp</welcome-file>
  </welcome-file-list>

在前台,调用的方式如下:

        var chart;
        $(document).ready(function(){
            Highcharts.setOptions({
                lang: {
                    printChart:"打印图表",
                    downloadJPEG: "下载JPEG 图片" ,
                    downloadPDF: "下载PDF文档"  ,
                    downloadPNG: "下载PNG 图片"  ,
                    downloadSVG: "下载SVG 矢量图" ,
                    exportButtonTitle: "导出图片"
                }
            });
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20    //center
                },
                subtitle: {
                    text: '测试中文乱码',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                exporting:{
                    enabled:true,
                    filename:'class-booking-chart',
                    url:'http://localhost:8081/HighChartsDemo/SaveAsImage'
                },
                tooltip: {
                    formatter: function(){
                        return '<b>' + this.series.name + '</b><br/>' +
                                this.x + ': ' + this.y + '°C';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Tokyo',
                    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]
                },{
                    name: 'New York',
                    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]
                },{
                    name: 'Berlin',
                    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]
                },{
                    name: 'London',
                    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]
                }]
            });

同样,如果不想将导出按钮不显示在图片上的话,你可以通过chart.getSVG()函数来获取到chart的svg元素,并以ajax的方式传给后台,代码如下:

            $("#export").click(function(){
            	var svg = chart.getSVG();
            	$.ajax({
            		type: "post",
            		url: 'http://localhost:8081/HighChartsDemo/SaveAsImage',
            		data:{
            			type:"image/png",
            			filename:"chart",
            			svg:svg
            		},
            		success: function(data){
            			console.log("success");
            		}
            	});
            });

batik的lib包下载地址:http://pan.baidu.com/s/1dDwEvqL

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Hadoop实操

如何在CDH启用Kerberos的情况下安装及使用Sentry(二)

使用beeline连接HiveServer2,创建columnread角色并授权test表s1列的读权限,将columnread角色授权给fayson_r用户组

1.2K8
来自专栏bboysoul

如何在metasploit中使用shodan

首先打开metasploit sudo service postgresql start msfconsole

1173
来自专栏码匠的流水账

解决jd-gui在Sierra下闪退问题

在升级了mac操作系统到Sierra版本之后,之前的jd-gui就闪退了,本文就讲述一下如何解决这个问题。

2231
来自专栏linux驱动个人学习

基于input子系统的sensor驱动调试(二)

继上一篇:https://cloud.tencent.com/developer/article/1054078 一、驱动流程解析: 1、模块加载: 1 st...

5777
来自专栏移动端周边技术扩展

iOS打开系统功能对应的URL

1773
来自专栏liulun

CEF C++环境搭建

第一步:下载CEF 到这里下载最新版本的CEF http://cefbuilds.com/ 下载解压之后,大概会看到如下图所示的文件 cefclien...

2617
来自专栏微信公众号:Java团长

抢红包案例分析以及代码实现

电商的秒杀、抢购,春运抢票,微信QQ抢红包,从技术的角度来说,这对于Web 系统是一个很大的考验. 高并发场景下,系统的优化和稳定是至关重要的.

3154
来自专栏海天一树

小朋友学C++(21):命名空间

这里的第一行,#include好理解,iostream是输入输出流,包含了输入流istream和输出流ostream。 第二行using namespace s...

1104
来自专栏Kotlin入门系列

win7基础 cmd 查看当前已经启动的服务列表

3976
来自专栏吴伟祥

Linux命令缩写英文对照记忆(〇) 转

962

扫码关注云+社区