我正在尝试创建使用Higharts服务器端生成的图形的图像,以用于PDF创建。
我已在我的 Centos 6.5 伺服器上安裝 PhantomJS,以便執行生成 Highcharts 映像。
我正在使用PHP,并且正在努力理解实际"运行"javascript所需的步骤,这将导致保存服务器端的图像以用于我的PDF(我正在使用mPDF生成PDF)。
我需要的过程:
- 用户点击"下载 PDF"
- 服务器端生成多个图表和图形,保存到服务器上的文件中
- mPDF 可以在构建 PDF 并提供下载时引用这些文件
这是我到目前为止尝试过的
从PHP运行PhantomJS浏览器在这个堆栈溢出问题"如何从PHP执行PhantomJS"之后,我推断我可以以这种方式运行PhantomJS应用程序。
exec('/usr/bin/phantomjs test.js');
其中 test.js 是一个 javascript 文件,其中包含构建 highchart 并生成相关图形的导出图像文件所需的 javascript,采用 PNG 格式。
测试 PhatomJS 的 exec() 方法我已经通过测试测试使用php成功运行phatomjs。
exec('/usr/bin/phantomjs --version', $o, $e);
print_r($o);回声$e;
这正确地给了我我的 phantomJS 版本号 (1.9.8) 和一个 0 错误代码(表示没有错误),所以我认为 PhantomJS 已经启动并运行正常,并且我正在使用正确的路径来访问它,并且似乎执行它正常。
创建一个 Javascript 文件,该文件将制作图形的服务器端图像
在对与我类似的问题的回答之后,我推断 test.js 文件的形式应该是这样的:
var system = require('system');
var page = require('webpage').create();
var fs = require('fs');
// load JS libraries
page.injectJs("https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js");
page.injectJs("/js/highcharts/highcharts.js");
page.injectJs("/js/highcharts/modules/exporting.js");
// chart demo
var args = {
width: 600,
height: 500
};
var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: opt.width,
height: opt.height
},
exporting: {
enabled: false
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
yAxis: {
title: {
text: 'Y-values'
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
},
series: {
enableMouseTracking: false,
shadow: false,
animation: false
}
},
series: [{
type: 'column',
name: 'Andrii',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'Fabian',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joan',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: 'white'
}
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Andrii',
y: 13,
color: '#4572A7'
}, {
name: 'Fabian',
y: 23,
color: '#AA4643'
}, {
name: 'Joan',
y: 19,
color: '#89A54E'
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
return chart.getSVG();
}, args);
// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');
phantom.exit();
但这似乎将 pdf 和 png 文件写入...某处(在哪里?同一个目录测试.js在?
- 如何让它呈现 PNG 而不是 PDF?
使用报告上述的exec错误给我退出代码11,我在这里看到这是分段错误?
测试
注意 我已经用 phantomJS 站点提供的一个简单的屏幕截图示例测试了 js 脚本:
var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
替换我的 highcharts 生成 javacsript,但它也返回退出代码 11。
我认为这可能是一个写入访问问题,因此测试了它写入一个文件,我将 chmod 更改为 777。没有区别
从命令行运行上述测试脚本会导致 phantomJS 崩溃和分段错误。
我现在还尝试运行一个 js 文件,该文件根本不尝试写入服务器,只在控制台日志中写入"Hello,world!",当以下是唯一占用测试时,退出代码 11 仍然存在.js
console.log('Hello, world!');
phantom.exit();
事实证明,这是物理内存的问题。我为我的服务器分配了 2GB,而 phantomJS 每次运行时都试图至少分配 1GB,偶尔这不是免费的,我得到了分段错误。
我将机器上的内存增加到4Gb,没有任何问题。