Highcharts：小案例，自定义图片下载路径，中文乱码的解决办法（不足之处，求指点）。
项目下载地址：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
把url : http://export.highcharts.com/修改为我们自己的url : http://localhost/hc/highChartServlet。
改后，默认下载路径为：
d.由于我是在Chrome下进行的测试，在IE下还得进行如下设置：
此处参考：http://www.douban.com/note/242998670/
修改exporting.js，加上红框里的那句。
