使用wkhtmltopdf进行pdf转换后，google图表hAxis文本不旋转
使用wkhtmltopdf进行pdf转换后，google图表hAxis文本不旋转
提问于 2017-10-05 09:51:21
朋友，我有问题的谷歌图表和pdf。我们有系统来创建图表报表。一切正常，只有我们发现的小问题。在Google图表中，hAxis文本在用wkhtmltopdf转换为pdf后不会被旋转。但在HTML上。我尝试延迟wkhtmltopdf，允许缓慢的脚本等等，但是没有工作。
这是HTML中的
这是PDF格式的
我看了这么多其他的页面，但没有找到任何解决办法。我还能做些什么来解决这个问题？如果可以修复的话。
编辑：
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},
};回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-05 14:36:35
要更正，需要向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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46582669
复制相关文章
相似问题
腾讯云开发者
