1

I have to render the column(bar) graph in pdf , i am using wickedpdf plugin and highcharts javascript. Following code works beautifully in html views, but while in pdf it does not work, i have tried disabling animation and mouse tracking as well but didn't help out.

Here goes my code 

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

please help in this regard, Thanks in advance :)

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 に答える