在 FPDF 中使用 Google Charts API 生成的图形答案

【问题标题】：Using Google Charts API Generated Graphic in FPDF在 FPDF 中使用 Google Charts API 生成的图形
【发布时间】：2015-10-01 13:04:12
【问题描述】：

嗯，问题确实在标题中。由于图形是使用 Javascript 创建的，并且 PDF 是在服务器端生成的，我想知道是否有任何方法（如果需要，可能是一种骇人听闻的、不太漂亮的方式）将这些图形包含到使用生成的 pdf 中FPDF。

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

编辑： 我几乎绝望了，因为我还没有找到一个 php 替代方案，我可以在其中创建一个像小提琴一样的图表。要求如下：

从上到下的线条
输入数据可以有浮点值
左侧和底部的轴具有正确的标签方向等。

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

【问题讨论】：

标签： javascript php google-visualization fpdf

【解决方案1】：

我使用这种方法将谷歌图表保存为图像，使用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);

【讨论】：

不错的解决方案，虽然我必须能够在服务器端生成它们，但我无法使用此解决方案
我使用上述生成报告的方法完成了我的项目。可能是你错过了什么:(

【解决方案2】：

这里是一个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() + '">';
  });

【讨论】：

问题是我没有可以在生成 PDF 时生成这些图形的客户端。 PDF 是在服务器端的 cronjob 中生成的。
好吧，既然google charts 是一个javascript 库，我想不出没有...javascript 的方法。如果图表总是相同，您可以运行一次javascript，将图像 url 保存在数据库中并在创建 pdf 时从那里读取它们？
嗯，这也是我的想法，但是让它们“在旅途中”创建当然会更好。我从来没有使用过node.js，只有一个非常模糊的概念，它到底是什么，但可以用它创建图像吗？因为它是服务器端 js afaik。
我不认为在你的项目中使用'Node.js'是你应该考虑的事情。如果您希望“即时”创建它们，另一种方法是创建一个 API，该 API 将图表的选项以及数据作为参数并返回图像。 Google 曾经有一个 Image Charts API，但目前已弃用。

【解决方案3】：

如果我错了，请纠正我，但据我所知，FPDF 只能使用（包含）图像文件。所以你可以做的是生成带有图像标题的图形，而不是在 FPDF 中包含指向该图形的链接（在包含在 php 中生成的内容并添加图像标题时工作正常，但在转换 JS 生成的图形时可能会很棘手，可能需要一些技巧）。另一种解决方案（如果可能）尝试使用 wkhtmltopdf。它从 html 页面生成 PDF（再次不确定这是否适用于 JS 生成的图形）。

【讨论】：