使用 wkhtmltopdf 进行 pdf 转换后谷歌图表 hAxis 文本不旋转

Question

朋友，我对谷歌图表和 pdf 有疑问。我们有系统来创建带有图表的报告。一切正常，只有我们发现的小问题。在使用 wkhtmltopdf 转换为 pdf 后的 Google 图表 hAxis 文本不会旋转。但在 HTML 上是。我尝试延迟 wkhtmltopdf，允许慢速脚本等。但没有任何效果。

这是 HTML

这是PDF格式

我正在查看 SO 和其他页面，但没有找到任何解决方案。 我还能做些什么来解决这个问题？如果可以解决的话。

编辑：

var options = {              
         hAxis:{
            ticks:[<xsl:for-each select="//a:CommercialDelphiHistory/b:CompanyHistory/b:ScoreHistory">
            new Date(<xsl:value-of select="./b:ScoreHistoryDate/c:CCYY" />, <xsl:value-of select="./b:ScoreHistoryDate/c:MM"/>),
            </xsl:for-each>],
            girdlines:{color:'#000000',count:0},
            minorGirdlines:{color:'#000000',count:0},
            slantedTextAngle: 90,
            },
          legend: {position: 'bottom', textStyle:{}},
          colors: ['#1310ce', '#6a09a3'],
          pointSize: 10,
          series:{
          0: {pointShape: { type: 'square', rotation: 45}},
          1: {pointShape: { type: 'triangle', sides: 4 } },
          },          
          title: 'Credit limit and Credit Rating',
          height: 625,
          width: 475,
          chartArea:{left: 75, top:35, width:'75%', height: 375},
};

Answer 1

要更正，需要在hAxis添加如下选项

slantedText: true

没有这个选项，文字不会倾斜，不管slantedTextAngle

此外，重叠标签是在隐藏容器中绘制图表的结果
这很可能是pdf过程的结果

---

为了重现问题，我在隐藏容器中绘制图表，
然后在绘制完成后显示图表...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['Nov 2016', 100],
    ['Dec 2016', 100],
    ['Jan 2017', 100],
    ['Feb 2017', 100],
    ['Mar 2017', 100],
    ['Apr 2017', 100],
    ['May 2017', 100]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    $(container).removeClass('hidden');
  });
  chart.draw(data, {
    hAxis:{
      slantedTextAngle: 90,
    },
    legend: {position: 'bottom', textStyle:{}},
    colors: ['#1310ce', '#6a09a3'],
    pointSize: 10,
    series:{
    0: {pointShape: { type: 'square', rotation: 45}},
    1: {pointShape: { type: 'triangle', sides: 4 } },
    },
    title: 'Credit limit and Credit Rating',
    height: 625,
    width: 475,
    chartArea:{left: 75, top:35, width:'75%', height: 375},
  });
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

---

添加选项可以解决这里的问题...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['Nov 2016', 100],
    ['Dec 2016', 100],
    ['Jan 2017', 100],
    ['Feb 2017', 100],
    ['Mar 2017', 100],
    ['Apr 2017', 100],
    ['May 2017', 100]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    $(container).removeClass('hidden');
  });
  chart.draw(data, {
    hAxis:{
      slantedText: true,
      slantedTextAngle: 90,
    },
    legend: {position: 'bottom', textStyle:{}},
    colors: ['#1310ce', '#6a09a3'],
    pointSize: 10,
    series:{
    0: {pointShape: { type: 'square', rotation: 45}},
    1: {pointShape: { type: 'triangle', sides: 4 } },
    },
    title: 'Credit limit and Credit Rating',
    height: 625,
    width: 475,
    chartArea:{left: 75, top:35, width:'75%', height: 375},
  });
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>