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

Question

嗯，這個問題確實在標題中。 由於圖形是使用Javascript創建的，並且PDF是在服務器端生成的，因此我想知道是否有任何方法（如果需要可能是一種hackish，不那么漂亮的方式）將這些圖形包含到使用生成的pdf中FPDF。

我想要包含的圖表示例： https： chart.draw(data, options);

編輯：我幾乎絕望，因為我沒有找到一個PHP替代品，我可以創建一個像小提琴的圖形。 要求如下：

• 從上到下的線條
• 輸入數據可以具有浮點值
• 左側和底部的軸具有正確的標簽方向等。

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

Answer 1

這是一個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() + '">';
  });

Answer 2

如果我錯了，請糾正我，但據我所知，FPDF只能使用（包括）圖像文件。 所以你可以做的是使用圖像標題生成該圖形，而不是在FPDF中包含指向該圖形的鏈接（包含在php中生成的內容並添加圖像標題時工作正常，但轉換JS生成的圖形可能很棘手，可能需要一些黑客攻擊）。 另一個解決方案（如果可能）嘗試使用wkhtmltopdf。 它從html頁面生成PDF（再次不確定它是否適用於JS生成的圖形）。

Answer 3

我使用此方法將谷歌圖表保存為圖像，方法是使用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);