highchart导出功能的介绍更改exporting源码

时间:2022-05-22 08:34:32

本案利用highchar作为前端,展示数据的图形效果,结合spring+springmvc来完成数据图片的导出。

jsp引入文件:

<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>

<script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath}/js/exporting.js"></script>

如不更改exporting,系统如没有拦截,可以顺利下载对应的图片的文件,如有拦截,不能下载。

更改内容如下:

highchart导出功能的介绍更改exporting源码

jsp源码:

<script type="text/javascript">
$(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);
}
}
},
series:[{
data:[20,66,77,15,71,33,54,64,78,11,60,25,78,65,23,78,64,85,25]
}]

});

});
</script>

</head>
<body>
<div id="container" style="min-widht:400px;height:400px"></div>
</body>
</html>

pringmvc:

============================分割线================================

@Controller
@RequestMapping("/highchar")
public class HighCharController {

@RequestMapping("/getHighchart")
public void getHighchart(HttpServletRequest request,HttpServletResponse response) throws IOException{
System.out.println("getHightchar...........................");

String type = request.getParameter("type");
String svg = request.getParameter("svg");
System.out.println(type+"88888888888888888888888888888");
System.out.println(svg+"88888888888888888888888888888");
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();

}

}