與PHP循環一起使用PhantomJs

Question

我一直致力於整合PhantomJS以幫助在我的服務器上創建圖像，然後可以在HTML模板中使用該圖像並使用mPDF將其保存爲PDF。我正在使用Yii2，並設法使用一些僞腳本生成並保存圖像。但我不確定如何爲動態數據做到這一點。

目前我有這種非常粗略的實現：

shell.php

if(exec('C:\xampp\htdocs\phantomjs\bin\phantomjs C:\xampp\htdocs\ reporting\views\site\test.php')){ 
echo 'yes'; 
} else echo 'no'; 

我test.php文件基本上是用PHP擴展的JavaScript文件。

test.php的

var system = require('system'); 
var page = require('webpage').create(); 
var fs = require('fs'); 

// load JS libraries 
if(page.injectJs('C:\\xampp\\htdocs\\phantomjs\\jquery.1.9.1.min.js')){ 
console.log('Jquery used'); 
} 
if(page.injectJs('C:\\xampp\\htdocs\\phantomjs\\highcharts.js')){ 
console.log('highcharts used'); 
} 
if(page.injectJs('C:\\xampp\\htdocs\\phantomjs\\highcharts-convert.js')){ 
console.log('highcharts-convert used'); 
} 

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("test.svg", svg); 
// Saving diagram as PDF 
//setTimeout(function(){ 
page.render('test.png', {format: 'png', quality: '100'}); 

phantom.exit(); 

這產生並保存png文件（雖然尺寸未設定）。

我已經認識到，但我不能在這個文件中使用PHP。 exec()調用永遠不會返回，我只是最終取消它。我假設這是因爲PhantomJS在遇到<?php標籤時不知道該怎麼做。

什麼是嘗試使用PHP來生成和保存圖表循環數據庫數據的最佳方式？

Answer 1

我一直在努力整合PhantomJS來幫助在我的服務器上創建圖像，然後可以在HTML模板中使用圖像並使用mPDF保存爲PDF。

這聽起來是一種過度複雜的方式來完成您的任務。你知道PhantomJS也可以生成PDF嗎？

page.render('charts.pdf'); 

所以我建議創建一個普通的HTML頁面（從YII2應用程序），上面有所有必要的圖表，然後簡單地將其與PhantomJS渲染成PDF。

---

不過，如果你想反正你PhantomJS腳本中使用變量從PHP，有當然的方式來做到這一點。你在正確的軌道上，認爲用PHP可以動態地生成腳本。但在將該腳本傳遞給PhantomJS之前，必須由PHP處理。因爲你已經使用了一個MVC框架，所以我建議這樣做：爲你的js腳本創建一個模板（本質上是一個視圖/部分），像視圖一樣加載它，將圖表的數據傳遞給它並創建一個有效的腳本，在他們需要的任何地方插入動態變量。事情是這樣的：

在應用模型/控制器相應的準備你的數據（僞代碼，我沒有做過的Yii）：

$series = array(); 
foreach ($data as $line) 
{ 
    $series[] = array(
     "type" => 'column', 
     "name" => $line['name'], 
     "data" => $line['data'] 
    ); 
} 
$this->view->params['series'] = $series; 

然後通過它查看和使用像這樣：

var chart = new Highcharts.Chart({ 
    ... 
    series: <?php echo json_encode($this->params['series']); ?> 
    ... 
}); 

然後，不要發送輸出到瀏覽器，抓住它並保存到臨時文件，然後將其作爲參數的文件名傳遞給PhantomJS。