Question

朋友我有谷歌图表和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过程的结果

重新创建问题，我在隐藏的容器中绘制图表，
然后在完成绘图时显示图表...

＆＃13;

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},
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

添加选项可以解决此问题......

＆＃13;

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},
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: