使用phantomjs实现的highchart导出 [英] highchart exporting with phantomjs implementation

查看:148
本文介绍了使用phantomjs实现的highchart导出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在我的 jsp / glassfish 网站项目中实现 highchart 导出功能,被转换为 png,jpgs和pdfs 格式,但处于离线模式.i已按照官方出口网站提供的步骤和说明进行操作,但遇到以下问题。


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


  2. 我更改位于highcharts-export \highcharts-export-web\src\main\webapp\WEB-INF\spring中的app-convert.properties文件中的值文件夹
    ,最后运行mvn命令生成war文件
    (*我没有任何关于mvn的知识,我只是遵循了在Highchart导出网站中给出的步骤)


  3. 在生成war文件后,我将它上传到我的 glassfish 服务器


所以问题是

当我从gl启动导出应用程序时我也尝试过创建 phantomjs 服务器on localhost like this #### phantomjsD:\Atul\Work\current\export-study\exporting-server\phantomjs\highcharts-convert.js-host 127.0.0.1 -port 3003 ####(哈希只是暗示命令)
但是当我在图表中使用导出选项并单击打印时,我得到json解析错误


所以请大家帮我实现这个导出函数..如果可能的话,请给我一步一步的说明,以获得我想要的输出。



提前致谢

解决方案

尽管答案为时已晚,但如果有人



在尝试创建phantomjs服务器之后,我放开了它并在Internet上搜索解决方案时遇到了蜡染。 Highchart官方w ebsite他们也提到蜡染可以用来导出图表。因此,经过一些更多的试验后,我终于可以离线导出我的图表,并且实现很简单。为了使它工作,您需要蜡染库文件。他们有项目托管在github;你可以从那里下载所需的jar包。下载完整的包之后,我只需使用batik.jar,batik-transcoder.jar,pdf-transcoder.jar,因为我只想导出我的图表为JPEG,PNG和PDF格式。



因此,我将这些库添加到了我的net-beans项目中。



在初始化您的highchart的地方添加此代码

 出口:{
按钮:{
contextButton:{
menuItems:[{
text: '导出为PNG',
onclick:function(){
printChart(panelno,image / png);

} {
text:'导出为JPEG',
onclick:function(){
printChart(panelno,image / jpeg);
},
separator:false
},{
text:'导出为PDF',
onclick:function(){
printChart(panelno, 应用程序/ PDF);
},
separator:false
}]
}
}}

出口是highchart支持的选项之一,例如系列,标题,plotOption等。
以下是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到一些变量。你可以得到他们使用的div ID在哪里显示图表或更具体的地方你声明



< div id =highchart>< / div>



多个高图在同一页面,以确定哪些图表调用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();}

那就是所有的图表都是由蜡染生成的,并且图表文件是在客户端发送下载的。


I am trying to implement highchart exporting function in my jsp/glassfish website project in which i need charts to be converted to png,jpgs and pdfs formats but in offline mode.i had followed the steps and instruction given in official exporting site but i encountered following issues.

  1. i have downloaded the phantom.js and highchart exporting folder

  2. i change values in "app-convert.properties" file located in "highcharts-export\highcharts-export-web\src\main\webapp\WEB-INF\spring" folder and finally just run mvn command to generate war file (* I dont have any knowledge for mvn i jut followed the steps given in highchart exporting website)

  3. After war file is generated i uploaded it to my glassfish server

So Issues Are

A) When i launched the export app from glassfish i get 404 error for demo page also

  • I have tried creating phantomjs server on localhost like this #### 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) but when i use export option in chart and click on print i get json parse error

So please folks help me to implement this export function .. if possible please give me step by step instructions for achieving my desired output.

Thanks in advance

解决方案

Although it is too late for an answer but if anyone stumble upon same problem it might be helpful.

After some unsuccessful attempts creating phantomjs server i let go of it and while searching on internet for solution i have came across batik.In Highchart official website they also mentioned batik can be use to export charts. So After some more trials i finally able to export my chart offline and implementation is simple.

To make it work you need batik library files.They have project hosted at github; you can download required jars from there.After downloading entire package i just use batik.jar,batik-transcoder.jar,pdf-transcoder.jar as i want to export my chart only as JPEG,png and pdf.

So i added these libraries in my net-beans project.

Add this code where you initialize your 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
        }]
    }
}}

exporting is a one of the option supported by highchart like series,title,plotOption etc. Below is code for printchart function

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

Just ignore panelno it is my custom field however what you have do is save chart option and svg into some variables.You can get them using div id where chart is displayed or more specifically where you declared

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

in my case i have multiple highchart at same page so to identify which chart calls printChart function i have use panelno

here testform is a form i declared inside my page; this form have three hidden input fields for chart type and svg once i have these value i submit the form to another jsp page which handles actual chart exporting.

Write following code in page where you actually exporting chart.

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

thats all your chart is generated by batik and chart file is send to download at client end.

这篇关于使用phantomjs实现的highchart导出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆