0

我正在尝试使用Lazy High Charts gem，但没有运气显示图表。生成的 Javascript 看起来是正确的，但由于某种原因，图表没有显示在 div 中。

这是在浏览器中生成的 JS：

    <script type="text/javascript">
            (function() {
              var onload = window.onload;
              window.onload = function(){
                if (typeof onload == "function") onload();
                        var options = { "title": { "text": "Population vs GDP For 5 Big Countries [2009]" },"legend": { "align": "right","verticalAlign": "top","y": 75,"x": -50,"layout": "vertical" },"xAxis": { "categories": [ "United States","Japan","China","Germany","France" ] },"yAxis": [ { "title": { "text": "GDP in Billions","margin": 70 } },{ "title": { "text": "Population in Millions" },"opposite": true } ],"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "column","renderTo": "orders_chart" },"subtitle": {  },"series": [{ "name": "GDP in Billions","yAxis": 0,"data": [ 14119,5068,4985,3339,2656 ] },{ "name": "Population in Millions","yAxis": 1,"data": [ 310,127,1340,81,65 ] }] };

            window.chart_orders_chart = new Highcharts.Chart(options);

              };
            })()
    </script>
<div id="orders_chart"></div>

这是视图中的内容：

<%= high_chart("orders_chart", @chart) %>

这是控制器代码：

def graph_orders

    @chart = LazyHighCharts::HighChart.new('graph') do |f|
      f.title(:text => "Population vs GDP For 5 Big Countries [2009]")
      f.xAxis(:categories => ["United States", "Japan", "China", "Germany", "France"])
      f.series(:name => "GDP in Billions", :yAxis => 0, :data => [14119, 5068, 4985, 3339, 2656])
      f.series(:name => "Population in Millions", :yAxis => 1, :data => [310, 127, 1340, 81, 65])

      f.yAxis [
        {:title => {:text => "GDP in Billions", :margin => 70} },
        {:title => {:text => "Population in Millions"}, :opposite => true},
      ]

      f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',)
      f.chart({:defaultSeriesType=>"column"})
    end

end

这是应用程序布局中的内容：

    <!DOCTYPE html>
<html>
<head>
  <title>Lono Orders</title>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <![endif]-->
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style media="screen" type="text/css">

    #orders_chart{
        width: 700px;
        height: 500px;
    }

  </style>
<body>

    <%= yield %>

</body>
</html>

这是我的 application.js 的样子：

//= require highcharts
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

有什么想法吗？

4

1 回答 1

3

Try changing this 

//= require highcharts
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

To 

//= require jquery
//= require jquery_ujs
//= require highcharts/highcharts
//= require turbolinks
//= require_tree .

You need to require jQuery first otherwise highcharts will not work correctly as the extensions cannot be defined because $ is undefinded. Also when I include highcharts in my js it is highcharts/highcharts and I am using it in 3 different applciations right now without issue.

于 2014-06-04T13:14:17.600 回答