使用谷歌图表API生成图形在FPDF


Using Google Charts API Generated Graphic in FPDF

问题就在标题里。由于图形是用Javascript创建的,而PDF是在服务器端生成的,所以我想知道是否有任何方法(如果有必要的话,可能是一种不太漂亮的方法)将这些图形包含到使用FPDF生成的PDF中。

我想包含的图表示例:https://jsfiddle.net/srm8gzqg/3/chart.draw(data, options);

编辑:

我几乎绝望了,因为我还没有找到一个php替代方案,我可以在小提琴中创建一个图形。要求如下:

  • 从上到下的行
  • 输入数据可以有浮点值
  • 轴在左边和底部,具有正确的标签方向等

我真的发现没有用php编写的好库,可以输出具有给定要求的图像文件(jpg, png等)。任何提示都非常感谢

这是一个以图像形式呈现的google图表的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() + '">';
  });

如果我错了,请纠正我,但据我所知,FPDF只能使用(包括)图像文件。所以你可以做的是生成带有图像头的图形,然后在FPDF中包含指向该图形的链接(在包含php生成的东西并添加图像头时工作良好,但转换JS生成的图形可能会很棘手,可能需要一些技巧)。另一个解决方案(如果可能的话)尝试使用wkhtmltopdf。它从html页面生成PDF(同样不确定它是否会与JS生成的图形一起工作)。

我用这个方法来保存谷歌图表作为一个图像使用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);