google 图表 hAxis 文本在使用 wkhtmltopdf 转换为 pdf 后不旋转

Question

朋友，我对 google 图表和 pdf 有疑问。我们有系统来创建带有图表的报告。一切正常，我们只发现了一个小问题。在 Google 图表上，使用 wkhtmltopdf 转换为 pdf 后的 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>

google 图表 hAxis 文本在使用 wkhtmltopdf 转换为 pdf 后不旋转

google chart hAxis text not rotate after pdf conversion with wkhtmltopdf

pdf

google-visualization

wkhtmltopdf