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

    }

    }

  • 相关阅读:
    添加discuz积分规则
    顺序栈 (栈操作)
    数据结构--链栈操作
    数据结构--循环队列
    素数对猜想
    export和export default的区别
    vue-day15----渲染时因异步易报错的点、分类页面数据渲染、CategoryContainer.vue进入Classify.vue-动态路由、tab切换动画-vant
    问题
    css语句解释
    vue-day14----mock数据(模拟数据)、details路由下详情(Detail)和评价(Assess)页面切换到商品(Goods)页面-localStorage、Assess组件(AssessList)数据渲染-父传子、评价和晒图页面切换-toggle传不同的参数重新请求、上拉加载更多-better-scroll
  • 原文地址:https://www.cnblogs.com/wlhebut/p/6197715.html
Copyright © 2020-2023  润新知