1

我必须在 pdf 中呈现列（条形）图，我正在使用 wickedpdf 插件和 highcharts javascript。以下代码在 html 视图中运行良好，但在 pdf 中它不起作用，我也尝试禁用动画和鼠标跟踪，但没有帮助。

这是我的代码

<%= wicked_pdf_javascript_include_tag 'jquery-1.6.2.min', 'dr_statistics/highcharts' %>
<script>

  $(function () {
     $('#container').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: 'Monthly Average Rainfall'
      },
      subtitle: {
        text: 'Source: WorldClimate.com'
      },
      xAxis: {
        categories: [
          'Jan',
          'Feb',
          'Mar',
          'Apr',
          'May',
          'Jun',
          'Jul',
          'Aug',
          'Sep',
          'Oct',
          'Nov',
          'Dec'
        ]
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Rainfall (mm)'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          enableMouseTracking: false,
          shadow: false,
          animation: false }
      },
      series: [{
          name: 'Tokyo',
          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
          name: 'New York',
          data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
          name: 'London',
          data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
          name: 'Berlin',
          data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]

    });
  });

</script>
<div id="container"></div>

请在这方面提供帮助，在此先感谢:)

4

2 回答 2

3

我正在开发一个项目，该项目使用 AmCharts javascript 库来动态生成图表，然后需要在 PDF 报告中显示这些图表。为了成功地做到这一点，我们在使用javascript 延迟pdf_from_string()生成的 html 页面上使用 WickedPdf render_to_string()，以确保图表已呈现。

这是我们在reports_controller 中的show() 方法中的使用示例

    format.pdf do
      pdf = WickedPdf.new.pdf_from_string(
        render_to_string('reports/show.html.erb',
          :layout => 'layouts/pdf.html',
          :javascript_delay => 5000),
      )
      send_data pdf, filename: "#{@report.name}.pdf",
            type: 'application/pdf',
            disposition: 'inline'

我知道这个问题是很久以前提出的，但我希望这会有所帮助。

于 2014-08-14T19:46:21.847 回答
0

您将无法在 pdf 中创建动态图表。您需要将其作为矢量图像或类似图像（jpg/png 等）导入。

幸运的是，highcharts提供了某种支持，可以使用 phantomjs 在服务器端导出图像。

将 highcharts 图表保存为图像，并将其作为图像调用，您就可以开始了。

于 2013-09-28T00:20:18.617 回答