Highcharts：小案例，自定義圖片下載路徑，中文亂碼的解決辦法（不足之處，求指點）。

時間 2019-11-17

標籤 highcharts 案例自定義圖片下載路徑中文亂碼解決辦法不足之處指點简体版

原文原文鏈接

項目下載地址：http://pan.baidu.com/s/1b0imwjavascript

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

2.依賴jar（能夠在項目找到）:java

jar包說明(jar也能夠在下面的網址裏找到)：jquery

此處參考：http://wang5598.iteye.com/blog/1183237web

核心的處理jar包是batik-codec.jar，它是apache項目組下面的一個專門用來處理圖形生成技術的開源產品：apache

apache batik : http://xmlgraphics.apache.org/batik/瀏覽器

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

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

3.jsp頁面ide

<%@ 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

把url : http://export.highcharts.com/修改成咱們本身的url : http://localhost/hc/highChartServlet。

改後，默認下載路徑爲：

d.因爲我是在Chrome下進行的測試，在IE下還得進行以下設置：

此處參考：http://www.douban.com/note/242998670/

修改exporting.js，加上紅框裏的那句。