javascript - 使用 wkhtmltopdf 时压扁了 Google Graphs

Question

对于我的博客 ( http://ios-blog.co.uk )，我使用 wkhtml: https://code.google.com/p/wkhtmltopdf/将包含分析数据的页面转换为 pdf。该图由 Google Graphs API 生成。 (https://google-developers.appspot.com/chart/interactive/docs/quick_start)

这是生成图表的代码:

var options = {
                        series: {
                            0: {targetAxisIndex: 0},
                            1: {targetAxisIndex: 1}
                        },
                        vAxes:{
                            0: {title: 'Impressions', minValue: 0},
                            1: {title: 'Clicks', minValue: 0}
                        }
                    };

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

在网页上，图像如下所示:

a busy cat http://markpetherbridge.co.uk/graph/graphLarge.png ![Google Graph Large][1]

但是在生成的 PDF 中，图表显示如下:

a busy cat http://markpetherbridge.co.uk/graph/graphSmall.png ![Google Graph 小][2]

正如您所看到的，图像没有被挤压，它似乎缺少“x”轴之外的东西并使图表变小。

有人能解释一下吗？

Answer 1

我遇到了同样的问题，我所做的就是压缩你试图转换的 html 文档中 body 标签的宽度，保持 char div 相同。

我设置的正文标签宽度为: 主体{宽度:795px!重要; }

并将 Javascript 中的图表 div 和 ChartArea 保持为 1200px 图表区域:{宽度:1200，高度:300}

希望这会有所帮助!