highchart与phantomjs实现出口(highchart exporting with p

2019-10-19 03:57发布

我想实现highchart出口功能在我jsp/glassfish中,我需要的图表转换为网站项目png,jpgs and pdfs格式,但在脱机mode.i曾跟随在官方网站导出给出的步骤和指令,但我遇到以下问题。

  1. 我已经下载了phantom.js和highchart导出文件夹

  2. 我在更改值“app-convert.properties”位于文件"highcharts-export\highcharts-export-web\src\main\webapp\WEB-INF\spring"文件夹,最后只运行mvn命令生成war文件(*我没有对任何MVN知识我跟着突出部分)的highchart出口网站给出的步骤

  3. 生成WAR文件后,我上传到我glassfish服务器

所以,问题是

A)当我从推出GlassFish的出口程序,我得到404错误演示页也

  • 我曾尝试创建phantomjs本地主机服务器这样#### phantomjs "D:\Atul\Work\current\export-study\exporting-server\phantomjs\highcharts-convert.js" -host 127.0.0.1 -port 3003 #### (hashes are just for implying command) ,但是当我使用的图表导出选项,然后点击打印我得到JSON解析错误

所以,请人帮我实现这个导出功能..如果可能的话,请给我实现我的期望输出步说明。

提前致谢

Answer 1:

虽然这是一个答案为时已晚,但如果有人偶然发现了同样的问题,它可能会有所帮助。

一些不成功的尝试创建phantomjs服务器后,我放手,虽然互联网的解决方案上搜索我已经跨越batik.In Highchart官方网站来了,他们也提到蜡染可以使用导出图表。 因此,一些更多的试验后,我终于可以到我的图表下线出口和实现简单。

为了使它工作,你需要蜡染库files.They已举办项目GitHub上; 你可以从处死。下载整个包,因为我想我的图表输出仅作为JPEG,PNG和PDF我只是使用batik.jar,蜡染transcoder.jar,PDF-transcoder.jar下载所需的罐子。

所以我在我的网豆项目添加这些库。

添加这段代码放到初始化highchart

exporting: {
buttons: {
    contextButton: {
        menuItems: [{
            text: 'Export to PNG',
            onclick: function() {
                printChart(panelno,"image/png");
            }
        }, {
            text: 'Export to JPEG',
            onclick: function() {
                printChart(panelno,"image/jpeg");
            },
            separator: false
        },{
            text: 'Export to PDF',
            onclick: function() {
                printChart(panelno,"application/pdf");
            },
            separator: false
        }]
    }
}}

出口是像系列,标题,plotOption等highchart支持选项的一个下面是printchart功能码

function printChart(panelno,printtype){
var chart = $k('#container'+panelno+panelno).highcharts();
var options = chart.options.exporting;
var svg=chart.getSVG();   


$k("#mytype").val(printtype);
$k("#mysvg").val(svg);
$k("#myfile").val("chart");
$k("#testform").submit();}

不理会panelno这是我的自定义字段,你必须做的但是什么是保存图表选项和SVG到一些variables.You可以让他们使用,其中的图表显示或更具体在哪里,你宣布DIV ID

<div id="highchart"></div>

在我的情况我在同一页的多个highchart所以要确定哪些图表调用printChart功能我有使用panelno

这里TESTFORM是我在我的页面内声明的形式; 这种形式有图表类型和SVG三个隐藏输入字段,一旦我有这些值我表单提交给它处理实际图表出口的另一个JSP页面。

下面写在你实际出口图表页面代码。

try {
String ctype = request.getParameter("charttype");
String svg = request.getParameter("svg");
String filename = request.getParameter("filename");


if (filename == null && filename.equals("")) {
    filename = "chart";
}

String ext = "";
Transcoder transcoder = null;
ServletOutputStream outp = response.getOutputStream();

if (!ctype.equals("image/svg+xml")) {
    InputStream svgInputStream = new ByteArrayInputStream(svg.getBytes());

    if (ctype.equals("image/png")) {
        ext = "png";
        transcoder = new PNGTranscoder();
    } else if (ctype.equals("image/jpeg")) {
        ext = "jpg";
        transcoder = new JPEGTranscoder();
    } else if (ctype.equals("application/pdf")) {
        ext = "pdf";
        transcoder = new PDFTranscoder();
    }

    response.setHeader("Content-disposition", "attachment; filename=" + filename + "." + ext);
    ////response.setHeader("Content-type", type);
    response.setContentType("application/download");

    TranscoderInput tInput = new TranscoderInput(svgInputStream);
    TranscoderOutput lOutput = new TranscoderOutput(outp);
    transcoder.transcode(tInput, lOutput);
} else {
    ext = "svg";

    response.setHeader("Content-disposition", "attachment; filename=" + filename + "." + ext);
    response.setHeader("Content-type", ctype);
  //  out.write(svg.getBytes());
}
outp.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();}

多数民众赞成由蜡染和图表文件生成的所有图表是在发送端的客户端下载。



文章来源: highchart exporting with phantomjs implementation