如何使用高图形自动创建pdf [英] how to auto create pdf using highchart graphs
本文介绍了如何使用高图形自动创建pdf的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在centos 5上使用yii framework 1.14。我设计了一个视图，其中包含使用highcharts创建的4个图。我想从我的控制器/操作方法将此页面导出为pdf。
以下是我目前为止的内容。 html生成的很好，但是当我尝试导出到pdf时，我只能在视图中获取标题并且没有图形。
$ b 控制器/操作
if（isset（$ _ GET ['report']））{
$ graph = 4 ;
$ arr = array（）;
$其中= array（
array（PROJCODE=> array（Woking，Cairo），MC=> array（MC）），
阵列（PROJCODE=>阵列（休斯顿，开罗），MC=>阵列（MC）），
阵列（PROJCODE ）MC=>阵列（MC）），
阵列（MC=>阵列（P）），
）;
$ title = array（
array（Woking& Cairo），
array（Houston& Cairo），
array（Jakarta），
array（），
）; （$ i = 0; $ i< $ graph; $ i ++）{
$ model = new ViewWebprojectreport（'weeklystatus'）;
;
$ model-> unsetAttributes（）;
$ dataProvider = $ model-> weeklystatus（$ where [$ i]）;
$ dataProvider-> pagination-> pageSize = $ model-> count（）;
// print_r（$ dataProvider）;
$ blank = array（）;
foreach（$ dataProvider-> getData（）as $ data）{
$ blank [] = $ data;
}
$ count = 0;
$ command = array（）;
foreach（$ dataProvider-> getData（）as $ data）{
$ count ++;
$命令[$ count] [PROJECT] = $ data-> PROJECT;
$命令[$ count] [StartDATE] = $ data->开始日期;
$命令[$ count] [ProjectEndDate] = $ data-> ProjectEndDate;
$命令[$ count] [PERCENT] = $ data->百分;
$命令[$ count] [MC] = $ data-> MC;
$命令[$ count] [MC] = $ data-> ActualEndDate;
$ count ++;
}
$ totalprojects = $ count;
$ cat = array（）;
$ totalLength = array（）;
$ schedule = array（）;
$ complete = array（）;
$ plans = array（）;
$ totalprojects = count（$ command）;
$ scrollcount = 0;
if（count（$ command）> 20）
$ scrollcount = count（$ command） - 10; //设置滚动条取决于返回的记录
foreach（$ command = $ key => $ value）{
$ cat [] = $ value ['PROJECT'];
$ date_from =（strtotime（$ value ['StartDATE']））* 1000;
$ date_to =（strtotime（$ value ['ProjectEndDate']）+ 1 * 86400）* 1000;
$ b if（$ value ['MC'] == -1）
$ totalLength [] = array（low=> $ date_from，high= > $ date_to，color=>＃2f7ed8）;
elseif（$ value ['MC'] == 0）
$ totalLength [] = array（low=> $ date_from，high=> $ date_to，color > 中＃0d233a）;
else
$ totalLength [] = array（$ date_from，$ date_to）;
$ today = time（）;
$ startdate = strtotime（$ value ['StartDATE']）;
$ enddate = strtotime（$ value ['ProjectEndDate']）;
if（$ value ['ProjectEndDate'] ==）{
$ enddate = $ startdate;
}
$ diff_total = $ enddate - $ startdate;
$ diff_today = $ today - $ startdate;
$ schedule [] = array（$ date_from，$ today * 1000）;
//计算以完成项目完成百分比完成的天数
$ percentage_to_get = round（（float）$ value ['PERCENT']，2）;
$ percentage_of_days =（（int）$ value ['PERCENT'] == 0）？ 0：floor（$ diff_total / 100 * $ percentage_to_get）;
$ percentComplete =（（$ startdate + $ percentage_of_days）+ 1 * 86400）* 1000;
$ complete [] =（float）$ value ['PERCENT'];
$计划[] =（$ diff_today！= 0&& $ diff_total！= 0）？ （（（（$ today - $ startdate）/（$ enddate - $ startdate））* 100）> 100）？ 100：（（$ today - $ startdate）/（$ enddate - $ startdate））* 100：0;
$ b $ arr [] = array（'cat'=> $ cat，
//data=> $ totalLength，
complete=> $ complete，
计划=> $计划中，
totalprojects=> $ count，
title=> $ title [ $ i]，
key=> $ i）;
// echo $ i;
// print_r（$ arr）;
// echo< br>< br>;
}
$ this-> layout ='weekly_status_graph';
$ html = $ this-> renderPartial（'weekly_status_graph'，array（arr=> $ arr），true）;
/ *
＃mPDF
$ mPDF1 = Yii :: app（） - > ePdf-> mpdf（）;
＃您可以轻松覆盖默认构造函数的参数
$ mPDF1 = Yii :: app（） - > ePdf-> mpdf（''，'A4'）;
＃render（整页）
$ mPDF1-> WriteHTML（$ html）;
＃加载样式表
// $ stylesheet = file_get_contents（Yii :: getPathOfAlias（'webroot.css'）。'/main.css'）;
// $ mPDF1-> WriteHTML（$ stylesheet，1）;
$ b $＃renderPartial（仅当前控制器的'视图'）
// $ mPDF1-> WriteHTML（$ this-> renderPartial（'index'，array（），true）） ;
＃渲染图像
//$mPDF1->写HTML（tml：：：图像（ii：：Path Path O f f（（（'bro bro .c .c ss ss ss）））））''/ / / / / / / / / / /）
＃输出就绪PDF
$ mPDF1->输出（）;
* /
$ pdf = $ this-> createPdf（）;
$ pdf-> setOptions（array（'orientation'=>'Landscape'，
'margin-top'=> 0，
'margin-right'=> 10 ，
'margin-bottom'=> 0，
'margin-left'=> 10，
）
）;
// $ this-> layout ='pdf';
$ b $ pdf-> renderPage（'weekly_status_graph'，array（arr=> $ arr））;
$ this-> render（'weekly_status_graph'，array（arr=> $ arr））;
$ pdf-> send（'w'.date（'M-Y'）。'。pdf'）;
查看
< HEAD>
< script src =<？php echo Yii :: app（） - > request-> baseUrl;？> /js/jquery-2.1.0.js>< / script> ;
< script
type =text / javascript
src =<？php echo Yii :: app（） - > request-> baseUrl;？> / js /highcharts/highstock.js\"></script>
type =text / javascript
src =<？php echo Yii :: app（） - > request-> baseUrl;？ > /js/highcharts/highcharts-more.js>< /脚本>
< script
type =text / javascript
src =<？php echo Yii :: app（） - > request-> baseUrl;？> / js /highcharts/modules/exporting.js\"></script>
< script>
函数redyellowgreen（x）{
//console.log（$（x）.parent（））;
$（x）.attr（'fill'，'url（#MyGradient）'）;
}
函数createGradient（svg，id，stops）{
var svgNS = svg.namespaceURI;
var grad = document.createElementNS（svgNS，'linearGradient'）;
grad.setAttribute（'id'，id）;
for（var i = 0; i< stops.length; i ++）{
var attrs = stops [i];
var stop = document.createElementNS（svgNS，'stop'）;
for（var attr in attrs）{
if（attrs.hasOwnProperty（attr））stop.setAttribute（attr，attrs [attr]）;
}
grad.appendChild（stop）;
}
var defs = svg.querySelector（'defs'）|| svg.insertBefore（document.createElementNS（svgNS，'defs'），svg.firstChild）;
返回defs.appendChild（grad）;
}
< / script>
< / head>
< body>
< h1>多客户项目< / h1>
<？php foreach（$ arr as $ key => $ value）{？>
<？php if（$ key == 3）
echo< h1> Propiertary Projects< / h1>;
？>
< div id =weekly_status_graph<？= $ key？> style =height：600px; width：900px;>
<？php $ this-> renderPartial（'weekly_status_graph_template'，$ value）;？>
< / div>
<？php}？>
< / body>
view2
<脚本>
$（document）.ready（function（）{
// function buildColumnGraph（data）{
var projects_title =< ;? echo json_encode（$ title）;？> ;;
$（'＃weekly_status_graph<？= $ key？>'）。highcharts（{
// var chart = new Highcharts.Chart（{
图：{
类型：'列'，
//倒转：true，
// renderTo：'container'
}，
title：{
text：projects_title
}，
xAxis：{
categories：< ;? echo json_encode（$ cat）;？>，
// min：data.scroll ，
标签：{
rotation：-45，
align：'right'，
style：{
fontSize：'13px'，
fontFamily： 'Verdana，sans-serif'
}
}
}，
y轴线：{
分钟：0，
m ax：100，
title：{
text：'％COMPLETE'
}，
}，
plotOptions：{
列：{
pointPadding：0.2，
borderWidth：0
}
}，
tooltip：{
formatter：function（）{$ b $ if（this.series。 name ==Actual）{
returnActual POC+ this.y +％;
} else if（this.series.name ==Planned）{
returnPlanned POC+ this.y +％;
}
}
}，
图例：{
启用：true，
verticalAlign：'top'，
align：'right' ，
floating：true，
}，
credit：{
enabled：false
}，
exporting：{
enabled：false，
}，
系列：[
{
'名称'：'已计划'，
'数据'：< ;?回声json_encode（$计划）;
'color'：rgb（91,155,213）
}，
{
名称：'Actual'，
data：<回声json_encode（$完整）;
color：'rgb（237,125,49）'
}
]
}）; //结束columngraph
//在图2中为图例创建线性渐变
createGradient（$（'svg'）[0]，'MyGradient'，[
{offset：'3％'，'stop-color'：'red'}，
{offset：'95％'，'stop-color'：'＃10f200'}
]） ;
//}
}）;
< / script>
如果我将 放在视图上并使用我的pdf打印机创建pdf 。它创建了图形的x轴和y轴，但没有列。
UPDATE
我正在尝试执行以下这些操作，以便创建映像并将其放置在临时目录中。我已经设置了使用本地导出服务器的高图。
var data =filename =+<？= $ key？ > （div）。contents（svg）+& type = image / png& width = 900px& scale = 2& svg =+ $（＃weekly_status_graph< ）;
$ .ajax（{
type：POST，
url：'<？php echo Yii :: app（） - > request-> baseUrl;？> / protected / extensions / highcharts / exporting-server / php / php-batik / index.php'，
data：data，
success：function（data）{
}
} ）;
我得到的jquery结果是
< pre>将要转码1个SVG文件
将5ea8ca9b4530955b6076e033627b1f49.svg转换为temp / 5ea8ca9b4530955b6076e033627b1f49.png ... ...错误（SVGConverter。 error.while.rasterizing.file）
< / pre>转换SVG时出错。
< h4>调试步骤< / h4>
< ol>
< li>复制SVG：< br />< textarea rows = 5> [object Object]< / textarea>< / li>
< li>前往< a href ='http：//validator.w3.org/#validate_by_input'target ='_ blank'> validator.w3.org/#validate_by_input< / a>< /立GT;
< li>粘贴SVG< / li>
< li>点击更多选项并选择SVG 1.1以使用Doctype< / li>
< li>点击检查按钮< / li>
< / ol>
这将一个SVG对象传递给蜡染。我需要更正什么？
解决方案
我已经安装了 phantomjs in我的控制器创建了一个数组，并用输出到文件的json编码。然后使用 phantomjs 将其转换为图像。请参阅下面的代码。
我使用的是 Yii 并且有 highcharts 位于包含我需要的所有内容的扩展文件夹。我必须下载并在该目录中放置 batik 。
$ json = json_encode（
chart=>数组（
type=>'column'，
width=> 1000，
height => 350
），
title=>数组（
text=> $ title [$ i]
），
xAxis =>数组（
categories=> $ cat，
labels=>数组（
rotation=> $ rotation，
align =>'left'，
style=> array（
fontSize=>'8px'，
fontFamily=>'Verdana，sans-serif'，
width=>75px
）
）
），
yAxis =>数组（
min=> 0，
max=> 100，
title=> array（
text=> ;'％COMPLETE'
），
tickInterval=> 10
），
plotOptions=> array（
column=>数组（
pointPadding=> 0.2，
borderWidth=> 0
）
），
legend=>数组（
enabled=> true，
verticalAlign=>'middle'，
align=>'right'，
//floating=> true
），
credits=> array（
，
系列=>数组（
数组（
'name'=>'已计划'，
'数据） '=> $计划中，
'color'=>rgb（91,155,213）
），
数组（
name=>'Actual'，
data=> $ complete，
color=>'rgb（237,125,49）'
）
）
））;
$ file =protected / extensions / highcharts / exporting-server / php / php-batik / temp / $ i.json;
//将内容写回文件
file_put_contents（$ file，$ json）;
//生成用于每周状态报告的图像
shell_exec（/ usr / local / bin / phantomjs protected / extensions / highcharts / exporting-server / phantomjs / highcharts-convert.js -infile protected / extensions / highcharts / exporting-server / php / php-batik / temp / $ {i} .json -outfile images / $ i.png -constr Chart）;
I am using yii framework 1.14 with php on centos 5. I have designed a view that contains 4 graphs created using highcharts. i want to export this page to pdf from my controller/action method. The following is what I have so far. the html gets produced fine but when i try to export to pdf i only get the headers in the view and no graphs.
controller/action
if(isset($_GET['report'])){
$graphs = 4;
$arr = array();
$where = array(
array("PROJCODE"=>array("Woking","Cairo"),"MC"=>array("MC")),
array("PROJCODE"=>array("Houston","Cairo"),"MC"=>array("MC")),
array("PROJCODE"=>array("Jakarta"),"MC"=>array("MC")),
array("MC"=>array("P")),
);
$title = array(
array("Woking & Cairo"),
array("Houston & Cairo"),
array("Jakarta"),
array(""),
);
for ($i = 0; $i < $graphs; $i++) {
$model=new ViewWebprojectreport('weeklystatus');
$model->unsetAttributes();
$dataProvider = $model->weeklystatus($where[$i] );
$dataProvider->pagination->pageSize = $model->count();
//print_r($dataProvider);
$blank = array();
foreach ($dataProvider->getData() as $data) {
$blank[] = $data;
}
$count = 0;
$command = array();
foreach ($dataProvider->getData() as $data) {
$count++;
$command[$count]["PROJECT"] = $data->PROJECT;
$command[$count]["StartDATE"] = $data-> StartDATE;
$command[$count]["ProjectEndDate"] = $data-> ProjectEndDate;
$command[$count]["PERCENT"] = $data-> PERCENT;
$command[$count]["MC"] = $data-> MC;
$command[$count]["MC"] = $data->ActualEndDate;
$count++;
}
$totalprojects = $count;
$cat = array();
$totalLength = array();
$schedule = array();
$complete = array();
$planned = array();
$totalprojects = count($command);
$scrollcount = 0;
if(count($command)>20)
$scrollcount = count($command) - 10; // set scrollbar depending on records returned
foreach ($command as $key => $value) {
$cat[] = $value['PROJECT'];
$date_from = (strtotime($value['StartDATE']) )*1000;
$date_to = (strtotime($value['ProjectEndDate']) + 1*86400)*1000;
if($value['MC'] == -1)
$totalLength[] = array("low"=>$date_from,"high"=>$date_to, "color"=>"#2f7ed8");
elseif($value['MC'] == 0)
$totalLength[] = array("low"=>$date_from,"high"=>$date_to, "color"=>"#0d233a");
else
$totalLength[] = array($date_from,$date_to);
$today = time();
$startdate = strtotime($value['StartDATE']);
$enddate = strtotime($value['ProjectEndDate']);
if( $value['ProjectEndDate'] == ""){
$enddate = $startdate;
}
$diff_total = $enddate - $startdate;
$diff_today = $today - $startdate;
$schedule[] = array( $date_from, $today*1000 );
// work out number of days completed by percent complete of project
$percentage_to_get = round((float)$value['PERCENT'],2);
$percentage_of_days = ((int)$value['PERCENT'] == 0)? 0 : floor($diff_total/100*$percentage_to_get);
$percentComplete = (($startdate + $percentage_of_days)+ 1*86400)*1000;
$complete[] = (float) $value['PERCENT'];
$planned[]=($diff_today != 0 && $diff_total != 0) ? ( ((($today - $startdate) / ($enddate - $startdate))*100) > 100 ) ? 100 : (($today - $startdate) / ($enddate - $startdate))*100 : 0;
}
$arr[] = array('cat'=>$cat,
//"data"=>$totalLength,
"complete"=>$complete,
"planned"=>$planned,
"totalprojects"=>$count,
"title"=>$title[$i],
"key"=>$i);
//echo $i;
//print_r($arr);
//echo "<br><br>";
}
$this->layout = 'weekly_status_graph';
$html = $this->renderPartial('weekly_status_graph',array("arr"=>$arr),true);
/*
# mPDF
$mPDF1 = Yii::app()->ePdf->mpdf();
# You can easily override default constructor's params
$mPDF1 = Yii::app()->ePdf->mpdf('', 'A4');
# render (full page)
$mPDF1->WriteHTML($html);
# Load a stylesheet
//$stylesheet = file_get_contents(Yii::getPathOfAlias('webroot.css') . '/main.css');
//$mPDF1->WriteHTML($stylesheet, 1);
# renderPartial (only 'view' of current controller)
//$mPDF1->WriteHTML($this->renderPartial('index', array(), true));
# Renders image
//$mPDF1->WriteHTML(CHtml::image(Yii::getPathOfAlias('webroot.css') . '/bg.gif' ));
# Outputs ready PDF
$mPDF1->Output();
*/
$pdf = $this->createPdf();
$pdf->setOptions(array('orientation'=>'Landscape',
'margin-top' => 0,
'margin-right' => 10,
'margin-bottom' => 0,
'margin-left' => 10,
)
);
//$this->layout = 'pdf';
$pdf->renderPage('weekly_status_graph',array("arr"=>$arr));
$this->render('weekly_status_graph',array("arr"=>$arr));
$pdf->send('w'.date('M-Y').'.pdf');
view
<head>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-2.1.0.js"></script>
<script
type="text/javascript"
src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/highstock.js"></script>
<script
type="text/javascript"
src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/highcharts-more.js"></script>
<script
type="text/javascript"
src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/modules/exporting.js"></script>
<script>
function redyellowgreen(x){
//console.log($(x).parent());
$(x).attr('fill','url(#MyGradient)');
}
function createGradient(svg,id,stops){
var svgNS = svg.namespaceURI;
var grad = document.createElementNS(svgNS,'linearGradient');
grad.setAttribute('id',id);
for (var i=0;i<stops.length;i++){
var attrs = stops[i];
var stop = document.createElementNS(svgNS,'stop');
for (var attr in attrs){
if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svg.querySelector('defs') || svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild );
return defs.appendChild(grad);
}
</script>
</head>
<body>
<h1>Multiclient Projects</h1>
<?php foreach ($arr as $key=>$value){?>
<?php if($key==3)
echo "<h1>Propiertary Projects</h1>";
?>
<div id="weekly_status_graph<?=$key?>" style="height:600px;width: 900px;">
<?php $this->renderPartial('weekly_status_graph_template',$value);?>
</div>
<?php }?>
</body>
view2
<script>
$(document).ready(function(){
//function buildColumnGraph(data){
var projects_title = <? echo json_encode($title);?>;
$('#weekly_status_graph<?=$key?>').highcharts({
//var chart = new Highcharts.Chart({
chart:{
type:'column',
//inverted:true,
//renderTo: 'container'
},
title:{
text:projects_title
},
xAxis:{
categories:<? echo json_encode($cat); ?>,
//min: data.scroll,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis:{
min:0,
max:100,
title: {
text: '% COMPLETE'
},
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
tooltip:{
formatter: function(){
if(this.series.name == "Actual"){
return "Actual POC " + this.y + "%";
}else if(this.series.name == "Planned"){
return "Planned POC " + this.y + "%";
}
}
},
legend:{
enabled:true,
verticalAlign:'top',
align:'right',
floating: true,
},
credits: {
enabled: false
},
exporting: {
enabled: false,
},
series:[
{
'name':'Planned',
'data':<? echo json_encode($planned); ?>,
'color': "rgb(91,155,213)"
},
{
name:'Actual',
data:<? echo json_encode($complete); ?>,
color: 'rgb(237,125,49)'
}
]
}); // end of columngraph
// create linear gradient for legend in 2 graph
createGradient($('svg')[0],'MyGradient',[
{offset:'3%', 'stop-color':'red'},
{offset:'95%','stop-color':'#10f200'}
]);
//}
});
</script>
If i put on the view and use my pdf printer to create pdf. it creates the x and y axis of the graphs but no columns.
UPDATE
I am trying to do the following which shoudl create the image and place in temp dir. I have set up highcharts to use local exporting server.
var data = "filename="+<?=$key?> + "&type=image/png&width=900px&scale=2&svg="+$("#weekly_status_graph<?=$key?>").children("div").contents("svg");
$.ajax({
type: "POST",
url: '<?php echo Yii::app()->request->baseUrl;?>/protected/extensions/highcharts/exporting-server/php/php-batik/index.php',
data:data,
success : function(data) {
}
});
The jquery result i get is
<pre>About to transcode 1 SVG file(s)
Converting 5ea8ca9b4530955b6076e033627b1f49.svg to temp/5ea8ca9b4530955b6076e033627b1f49.png ... ... error (SVGConverter.error.while.rasterizing.file)
</pre>Error while converting SVG.
<h4>Debug steps</h4>
<ol>
<li>Copy the SVG:<br/><textarea rows=5>[object Object]</textarea></li>
<li>Go to <a href='http://validator.w3.org/#validate_by_input' target='_blank'>validator.w3.org/#validate_by_input</a></li>
<li>Paste the SVG</li>
<li>Click More Options and select SVG 1.1 for Use Doctype</li>
<li>Click the Check button</li>
</ol>
This passes an SVG object to batik. what do i need to correct?
解决方案
I have installed phantomjs in my controller, created an array and encoded it with json with output to file. Then used phantomjs to convert it to image. See the code below.
I am using Yii and have highcharts located in the extensions folder which contains everything I need. I had to download and place batik in that directory.
$json = json_encode(array(
"chart"=>array(
"type"=>'column',
"width"=>1000,
"height"=>350
),
"title"=>array(
"text"=>$title[$i]
),
"xAxis"=>array(
"categories"=>$cat,
"labels"=>array(
"rotation"=>$rotation,
"align"=>'left',
"style"=>array(
"fontSize"=>'8px',
"fontFamily"=>'Verdana, sans-serif',
"width"=>"75px"
)
)
),
"yAxis"=>array(
"min"=>0,
"max"=>100,
"title"=>array(
"text"=>'% COMPLETE'
),
"tickInterval"=>10
),
"plotOptions"=>array(
"column"=>array(
"pointPadding"=> 0.2,
"borderWidth"=> 0
)
),
"legend"=>array(
"enabled"=>true,
"verticalAlign"=>'middle',
"align"=>'right',
//"floating"=> true
),
"credits"=>array(
"enabled"=> false
),
"series"=>array(
array(
'name'=>'Planned',
'data'=>$planned,
'color'=> "rgb(91,155,213)"
),
array(
"name"=>'Actual',
"data"=>$complete,
"color"=>'rgb(237,125,49)'
)
)
));
$file = "protected/extensions/highcharts/exporting-server/php/php-batik/temp/$i.json";
// Write the contents back to the file
file_put_contents($file, $json);
// generates images to use for weekly status report
shell_exec("/usr/local/bin/phantomjs protected/extensions/highcharts/exporting-server/phantomjs/highcharts-convert.js -infile protected/extensions/highcharts/exporting-server/php/php-batik/temp/${i}.json -outfile images/$i.png -constr Chart");
这篇关于如何使用高图形自动创建pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
