highcharts 图表不与 pdfkit (wkhtlmltopdf) 一起显示

Question

当我使用 pdfkit 生成包含 highcharts 图表的 pdf 页面时，我只是得到了图表应该位于的空白区域。

我的控制器代码如下所示：

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>

如果我在没有 send_data 行的控制器中使用 render_to_string(:template => "pages/pdf", :layout => false, :formats => :html)，图表显示正常（但布局仍在呈现...这可能是个问题吗？）

我不知道我在这里做错了什么。有任何想法吗？谢谢。

Answer 1

废话解决方法：

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 从常规 HTML 页面生成 PDF。不知道为什么 pdfkit 不会使用与页面显示相同的 HTML 来显示图表，但无论如何，