在FPDF中使用Google Charts API生成的圖形

嗯，問題真的出現在標題中。由於圖形是使用Javascript創建的，並且PDF是在服務器端生成的，所以我想知道是否有任何方法（如果有必要，可能是一種駭人的，不太漂亮的方式）將這些圖形包含到使用生成的pdf中FPDF。圖表的在FPDF中使用Google Charts API生成的圖形

例我想包括：https://jsfiddle.net/srm8gzqg/3/ chart.draw(data, options);

編輯： 林幾乎絕望，因爲我還沒有找到一個替代的PHP中，我可以創建這樣的曲線圖小提琴。要求如下：

從上線到下
輸入數據可以浮在左側和底部標籤正確方向值
軸等

我真的找到沒有用php編寫的很好的庫，可以輸出具有給定要求的圖像文件（jpg，png等）。任何提示高度讚賞

來源

2015-07-13 Michael Kunst

糾正我，如果我錯了，但據我所知FPDF只能使用（包括）圖像文件。所以你可以做的就是生成帶有圖像頭的圖形，並且在FPDF中包含指向該圖形的鏈接（包括在php中生成的東西並添加圖像頭時工作良好，但是轉換JS生成的圖形可能會非常棘手，可能需要一些黑客）。另一個解決方案（如果可能）嘗試使用wkhtmltopdf。它從html頁面生成PDF（再次不確定這是否會用JS生成的圖形）。

來源

2015-07-13 10:14:47 Auris

這是一個jsfiddle作爲圖像呈現的谷歌圖表的示例。您可以輕鬆地將「可打印版本」放入您的PDF中。

Google圖表具有getImageURI方法，它爲您提供您創建的圖表的png。

// Wait for the chart to finish drawing before calling the getImageURI() method. 
    google.visualization.events.addListener(chart, 'ready', function() { 
    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; 
    });

來源

2015-07-13 11:02:33

問題是我沒有客戶端，我可以在生成PDF時生成這些圖形。 PDF是在cronjob的服務器端生成的。 –

因爲'谷歌圖表'是一個''''圖書館，我想不出沒有..''''的方式。如果圖表總是相同的，你可以運行'javascript'一次，將圖像網址保存到數據庫中，並在創建pdf時從那裏讀取它們？ –

那麼這也是我想到的，但當然更好，讓他們創造「在這去」。我從來沒有使用node.js，只是非常模糊的想法是什麼，但是可以用它創建圖像嗎？因爲它是服務器端js afaik。 –

我用這個方法使用Base64 URL從服務器側一些文件夾中保存最後在FPDF使用作爲從文件夾中的圖像，以谷歌圖表保存爲圖像。

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
<script type="text/javascript"> 

    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawVisualization); 

    function drawVisualization() { 
    // Some raw data (not necessarily accurate) 
    var data = google.visualization.arrayToDataTable([ 
    ['', ''], 
    ['Numerical', 4], 
    ['Verbal', 6], 
    ['Mechanical', 4], 
    ['Reasoning', 5], 
    ['Spatial', 9] 
    ]); 

    var options = { 
    title : '', 
    vAxis: {title: "", viewWindowMode:'explicit', 
      viewWindow:{ 
      max:12, 
      min:0 
      }}, 
    hAxis: {title: ""}, 
    seriesType: "bars", 
    series: {5: {type: "line"}} 
    }; 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 

    var app1=(chart.getImageURI()); 
     $.post("appt1.php",{postapp: app1}, 
     function(){}); 
    } 
</script> 
<div id="chart_div" style="display: none;"></div> 


<!-- On the Server side do this to store image appt1.php --> 

$data =$_POST['postapp']; 
list($type, $data) = explode(';', $data); 
list(, $data) = explode(',', $data); 
$data = base64_decode($data); 

file_put_contents('exam_images/'."1".'.png', $data);

來源

2015-08-28 19:31:55

不是一個壞的解決方案，但我必須能夠在服務器端生成它們，但我無法使用此解決方案 –

我使用上述生成報告的方法完成了我的項目。可能是你缺少的東西:( –

在FPDF中使用Google Charts API生成的圖形

回答

相關問題