Ruby on rails 3.2 highcharts图表不使用pdfkit显示（wkhtlmltopdf）

当我使用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"

！！！5.
%html
%头
%头衔
%meta{:charset=>“UTF-8”}
：css
...
%身体
.结果容器
.结果
.结果图
=呈现：部分=>“页面/图形”
A.优先事项概览
-@priorities.each do| priority|
.优先权
.标题图
%h3
=priority.title
图表
=呈现：部分=>页面/优先级，：对象=>优先级
传奇
%跨度
分数
=“{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>

1007550250
$（函数（）{
变量选项={
图表：{
renderTo:'resultGraph'，
背景色：“透明”，
类型：'column'，
填充：[0,0,0,0]，
保证金：[0,10,50,30]
},
标题：{
文本：空
},
学分：{
已启用：false
},
图例：{
已启用：false
},
//系列：[{
//名称：“分数”，
//数据：
//}],
系列：[]，
xAxis：{
类别：，
线宽：0，
网格线宽：0，
minorGridLineWidth:0，
gridLineColor:'透明'，
lineColor:'透明'，
minorGridLineColor:“透明”，
minorTickLength:0，
长度：0，
数字：0，
标题：{
已启用：false
}
},
亚克斯：{
线宽：0，
网格线宽：0，
minorGridLineWidth:0，
gridLineColor:'透明'，
lineColor:'透明'，
minorGridLineColor:“透明”，
minorTickLength:0，
长度：0，
数字：0，
标题：{
文本：空
},
最低：-50，
最高：50，
恩东蒂克：是的，
标签：{
已启用：false
}
},
工具提示：{
已启用：false
},
打印选项：{
系列：{
点填充：0，
分组填充：0，
边框宽度：1，
影子：错，
zIndex:9，
enableMouseTracking:false，
影子：错，
动画：错，
国家：{
悬停：{
已启用：false
}
}
},
酒吧：{
zIndex:9
}
}
};
var数据=；
变量系列={
数据：[]
};
$。每个（数据、功能（项目编号、项目）{
变量数据={}；
data.y=parseFloat（项目）；
如果（项目>40）{
data.color=“#8dc53e”；
}否则，如果（项目>30）{
data.color=“#b5d558”；
}
否则，如果（项目>20）{
data.color=“#c8eb58”；
}
否则，如果（项目>10）{
data.color=“#dbe622”；
}
否则，如果（项目>0）{
data.color=“#facc40”；
}
否则，如果（项目>-10）{
data.color=“#faaf40”；
}
否则，如果（项目>-20）{
data.color=“#f7931e”；
}
否则，如果（项目>-30）{
data.color=“#f05a29”；
}
否则，如果（项目>-40）{
data.color=“#ee4136”；
}
否则如果（项目>=-50）{
data.color=“#cd392b”；
}
系列.数据.推送（数据）；
});
选项。系列。推送（系列）；
var chart1=新的Highcharts.图表（选项）；
});

如果我在没有发送数据行的控制器中使用

render\u to\u字符串（：template=>“pages/pdf”，：layout=>false，：formats=>：html）

，图表显示良好（但布局仍在渲染…这可能是个问题吗？）

我不知道我做错了什么。有什么想法吗？谢谢。

垃圾解决方案：

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\u pdf直接使用wkhtmltopdf从常规HTML页面生成pdf。不确定为什么pdfkit不会使用页面显示的相同HTML显示图形，但不管怎样