Highcharts右上角图片导出功能

最新推荐文章于 2022-01-18 10:17:05 发布

厦门子豪

最新推荐文章于 2022-01-18 10:17:05 发布

阅读量2.7k

点赞数 1

分类专栏： Highcharts 文章标签： hibernate 图片导出图片转换格式

本文链接：https://blog.csdn.net/qq348843576/article/details/46414043

版权

Highcharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近公司项目中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]
		}]
	
	});

});

效果：

厦门子豪

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Highcharts右上角图片导出功能

最近公司项目中Highcharts技术，花了两天学习了解并应用，导出其实就是原来SVG格式转成各种需要的图片格式，看过一些前辈们的整例，经过实验，可行。把此分享给大家。Highcharts右上角图片导出功能，也满简单，只需要三步就可以完成：1：导入JAR包（包括JS和JAVA包）如下图2.我们在工程中创建一个Servlet类和在web.xml中配置packa
复制链接

扫一扫