javascript - 使用 wkhtmltopdf 时压缩了谷歌图表

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 大图][1]

然而，在生成的 PDF 上，图形显示如下:

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

如您所见，图像没有被压扁，它似乎丢失了“x”轴之外的东西并使图形变小了。

任何人都可以阐明这一点吗？

Answer 1

我遇到了同样的问题，我所做的是压缩您要转换的 html 文档中 body 标签的宽度，同时保持 char div 不变。

body标签宽度我设置为:body { 宽度:795px !重要；

并且将 Javascript 中的图表 div 和 ChartArea 保持为 1200pxchartArea:{width:1200,height:300}

希望对您有所帮助!