zoukankan      html  css  js  c++  java
  • highchart导出功能的介绍更改exporting源码

    本案利用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,系统如没有拦截,可以顺利下载对应的图片的文件,如有拦截,不能下载。

    更改内容如下:

    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();

    }

    }

  • 相关阅读:
    通过命令修改wampserver的mysql密码
    MOS管(场效应管)导通条件
    JQUERY1.9学习笔记 之属性选择器(二) 包含选择器
    JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
    JQUERY1.9学习笔记 之可见性过滤器(二) 可见选择器
    JQUERY1.9学习笔记 之可见性过滤器(一) 隐藏选择器
    [forwarding]Android上dip、dp、px、sp等单位说明
    [forwarding]Android 常用控件讲解
    [forwarding] mysql数据库的备份、导入、导出命令,以及数据的导入、导出
    【Make My Eclipse】之 使用正确的插件
  • 原文地址:https://www.cnblogs.com/wlhebut/p/6197715.html
Copyright © 2011-2022 走看看