диаграммы highcharts не отображаются с помощью pdfkit (wkhtlmltopdf)

Когда я использую pdfkit для создания PDF-файлов страниц, содержащих диаграммы highcharts, у меня просто появляются пустые области, где должны быть диаграммы.

мой код контроллера выглядит так:

html = render_to_string(:template => "pages/pdf", :layout => false, :formats => :html)
kit = PDFKit.new(html)
send_data(kit.to_pdf, :filename => "results.pdf", :type => "application/pdf", :disposition => "inline")

pages / pdf.html.haml

!!! 5
%html
  %head
    %title
    %meta{:charset => "UTF-8"}
    <script src="/javascripts/jquery.min.js" type="text/javascript"></script>
    <script src="/javascripts/highcharts.js" type="text/javascript"></script>
    :css
      ...
  %body
    .results-container
      .results-inner
        .results_graph
          = render :partial => "pages/graph"
        .priorities-overview
          - @priorities.each do |priority|
            .priority
              .title-graphic
                %h3
                  = priority.title
                .graph
                  = render :partial => "pages/priority", :object => priority
                  .legend
                    %span
                      Score
                    = "#{priority.score.to_i}/100"

pages / graph.html.erb

<div id="resultGraph" class="graph bar-graph"></div>
<div id="graphLines"><div class="line"><div class="num">100</div></div><div class="line"><div class="num">75</div></div><div class="line center"><div class="num">50</div></div><div class="line"><div class="num">25</div></div><div class="line"><div class="num">0</div></div></div>
<script>
$(function(){

    var options = {
        chart: {
            renderTo: 'resultGraph',
            backgroundColor: 'transparent',
            type:'column',
            padding: [0, 0, 0, 0],
            margin: [0, 10, 50, 30]
        },
        title: {
          text: null
        },
        credits:{
            enabled: false
        },
        legend: {
            enabled: false
        },
        //series: [{
        //  name: "Scores",
        //  data: <%= @priorities.pluck('score - 50') %>
        //}],
        series: [],
        xAxis: {
          categories: <%=raw @priorities.pluck(:title) %>,
      lineWidth: 0,
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      gridLineColor: 'transparent',
      lineColor: 'transparent',
      minorGridLineColor: 'transparent',
      minorTickLength: 0,
      tickLength: 0,
      minPadding: 0,
      title: {
        enabled: false
      }
    },
    yAxis: {
      lineWidth: 0,
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      gridLineColor: 'transparent',
      lineColor: 'transparent',
      minorGridLineColor: 'transparent',
      minorTickLength: 0,
      tickLength: 0,
      minPadding: 0,
      title: {
        text: null
      },
      min: -50,
      max: 50,
      endOnTick: true,
      labels:{
        enabled: false
      }
    },
    tooltip: {
        enabled: false
    },
    plotOptions: {
        series: {
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 1,
            shadow: false,
            zIndex: 9,
            enableMouseTracking: false,
            shadow: false,
            animation: false,
            states: {
                hover: {
                    enabled: false
                }
            }
        },
        bar: {
            zIndex: 9
        }
    }
    };

    var data = <%= @priorities.pluck('score - 50') %>;
    var series = {
        data: []
    };
    $.each(data, function(itemNo, item){
        var data = {};
        data.y = parseFloat(item);
        if(item > 40){
            data.color = "#8dc53e";
        } else if(item > 30) {
            data.color = "#b5d558";
        }
        else if(item > 20) {
            data.color = "#c8eb58";
        }
        else if(item > 10) {
            data.color = "#dbe622";
        }
        else if(item > 0) {
            data.color = "#facc40";
        }
        else if(item > -10) {
            data.color = "#faaf40";
        }
        else if(item > -20) {
            data.color = "#f7931e";
        }
        else if(item > -30) {
            data.color = "#f05a29";
        }
        else if(item > -40) {
            data.color = "#ee4136";
        }
        else if(item >= -50) {
            data.color = "#cd392b";
        }
        series.data.push(data);
    });
  options.series.push(series);

  var chart1 = new Highcharts.Chart(options);
});
</script>

Если я использую render_to_string(:template => "pages/pdf", :layout => false, :formats => :html) в контроллере без строки send_data, диаграммы отображаются нормально (но макет все еще отображается ... может ли это быть проблемой?)

Я не знаю, что я здесь делаю не так. Любые идеи? Спасибо.


highcharts pdfkit ruby-on-rails-3.2
person aperture    schedule 10.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Обходной путь:

def pdf
  @user = User.find(params[:id])
  @priorities = @user.priorities.order("score desc")
  render "pages/pdf", :layout => false
end

def results_pdf
  if user_signed_in?
    @user = current_user
    @priorities = @user.priorities.order("score desc")
    FileUtils.mkdir_p "#{Rails.root.to_s}/public/results/#{@user.id.to_s}/pdf"
    system("wkhtmltopdf.sh http://[site].com/pdf/#{@user.id.to_s} #{Rails.root.to_s}/public/results/#{@user.id.to_s}/result.pdf")
    redirect_to "/results/#{@user.id.to_s}/result.pdf"
  else
    redirect_to "/login"
  end
end

По сути, действие pdf просто отображает HTML с видимыми графиками, затем results_pdf напрямую использует wkhtmltopdf для создания PDF из обычной HTML-страницы. Не уверен, почему pdfkit не отображает графики с использованием того же HTML, что и страница, но что угодно,

person aperture    schedule 10.06.2013