Highcharts：小案例，自定义图片下载路径，中文乱码的解决办法（不足之处，求指点）。...

最新推荐文章于 2024-02-07 15:10:31 发布

weixin_33762321

最新推荐文章于 2024-02-07 15:10:31 发布

阅读量435

点赞数

文章标签： java python javascript ViewUI

原文链接：https://my.oschina.net/u/853107/blog/171348

版权

2019独角兽企业重金招聘Python工程师标准>>>

项目下载地址：http://pan.baidu.com/s/1b0imw

1.highcharts.js（本人是用的3.0.5）下载地址：http://pan.baidu.com/s/1mp3EN（jquery就自己下载吧）

2.依赖jar（可以在项目找到）:

jar包说明(jar也可以在下面的网址里找到)：

此处参考：http://wang5598.iteye.com/blog/1183237

核心的处理jar包是batik-codec.jar，它是apache项目组下面的一个专门用来处理图形生成技术的开源产品：

apache batik : http://xmlgraphics.apache.org/batik/

apache fop : http://xmlgraphics.apache.org/fop/

apache xml graphics commons : http://xmlgraphics.apache.org/commons/

3.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test HighCharts</title>
<script src="<c:url value="/"></c:url>js/jquery-1.7.2.min.js"></script>
<script src="<c:url value="/"></c:url>js/highcharts.js"></script>
<script src="<c:url value="/"></c:url>js/exporting.js"></script>
<script type="text/javascript">
$(function () {
	chart = new Highcharts.Chart({
        chart: {
        	renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '浏览器所占比例, 2010'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '占比',
            data: [
                ['火狐',   45.0],
                ['IE浏览器',       26.8],
                {
                    name: '谷歌',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['其他',   0.7]
            ]
        }]
    });
});
    

		</script>
</head>
<body>
	<div id="container" style="min-width: 310px;  height: 400px; margin: 0 auto"></div>
</body>
</html>

4.修改项目右下角默认的Highcharts.com

如图：

打开highcharts.js文件，找到下面框起来的部分，改为空值，即可。

修改后：

5.导出设置

1).highcharts默认的打印和下载都是英文提示，下面修改为中文。

打开exporting.js ，找到如图的部分（进去就能看见），进行修改。

2):highcharts的默认下载都是http://export.highcharts.com/这个路径，下面修改成自己的url。

a.新建一个Servlet（还有其他方式，自己弄的Servlet，自己灵活选择吧）。

中文乱码解决方案也在代码里面。

HighChartsUtil，代码如下

package cn.zyc.servlet;

import java.io.IOException;
import java.io.StringReader;
import java.util.Iterator;
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 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.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.fop.svg.PDFTranscoder;

public class HighChartsUtil extends HttpServlet {

	private static final long serialVersionUID = -6266398282087799188L;

	public HighChartsUtil() {
	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		super.doGet(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		/*
		 * IE request.setCharacterEncoding("utf-8");// 注意编码 String type =
		 * request.getParameter("type"); String svg =
		 * request.getParameter("svg"); response.setCharacterEncoding("utf-8");
		 */

		//highcharts会传入的四个参数width，type，svg，filename； 
		String type = null;
		String svg = null;
		String filename = null;
		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		List items;
		try {
			items = upload.parseRequest(request);
			for (Iterator i = items.iterator(); i.hasNext();) {
				FileItem fileItem = (FileItem) i.next();
				String field = fileItem.getFieldName();
				if (field.equals("type")) {
					type = new String(fileItem.getString().getBytes(
							"ISO-8859-1"), "UTF-8"); // 转码
					continue;
				} else if (field.equals("svg")) {
					svg = new String(fileItem.getString()
							.getBytes("ISO-8859-1"), "UTF-8");
					continue;
				} else if (field.equals("filename")) {
					filename = new String(fileItem.getString().getBytes(
							"ISO-8859-1"), "UTF-8");
					continue;
				} 
			}
			System.out.println("type：" + type);
			System.out.println("svg：" + svg);
			System.out.println("filename：" + 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("application/pdf")) {
					ext = "pdf";
					t = new PDFTranscoder();
				} else if (type.equals("image/svg+xml")) {
					ext = "svg";
				}
				response.addHeader("Content-Disposition",
						"attachment; filename=chart." + 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("编码流错误.");
						e.printStackTrace();
					}
				} else if (ext == "svg") {
					svg = svg.replace("http://www.w3.org/2000/svg",
							"http://www.w3.org/TR/SVG11/");
					out.print(svg);
				} else {
					out.print("Invalid type: " + type);
				}
			} else {
				response.addHeader("Content-Type", "text/html");
			}
			out.flush();
			out.close();

		} catch (FileUploadException e1) {
			e1.printStackTrace();
		}
	}
}

b.配置xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	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_3_0.xsd">
  <display-name>Test HighCharts</display-name>	
  <servlet>
  	<servlet-name>highCharts</servlet-name>
  	<servlet-class>cn.zyc.servlet.HighChartsUtil</servlet-class>
<!--   	<load-on-startup>2</load-on-startup> -->
  </servlet>
  <servlet-mapping>
  	<servlet-name>highCharts</servlet-name>
  	<url-pattern>/highChartServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

c.修改exporting.js