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

    }

    }

  • 相关阅读:
    OpenCL学习笔记(三):OpenCL安装,编程简介与helloworld
    OpenCL学习笔记(二):并行编程概念理解
    OpenCL学习笔记(一):摩尔定律,异构计算与OpenCL初印象
    深度学习开源工具——caffe介绍
    机器学习方法(五):逻辑回归Logistic Regression,Softmax Regression
    OpenCL与CUDA,CPU与GPU
    深度学习方法:受限玻尔兹曼机RBM(二)网络模型
    深度学习方法:受限玻尔兹曼机RBM(一)基本概念
    机器学习方法:回归(三):最小角回归Least Angle Regression(LARS),forward stagewise selection
    机器学习方法(四):决策树Decision Tree原理与实现技巧
  • 原文地址:https://www.cnblogs.com/wlhebut/p/6197715.html
Copyright © 2011-2022 走看看