Highcharts с рельсами

Я пытаюсь использовать драгоценный камень Lazy High Charts, но мне не везет при отображении графика. Сгенерированный 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 .

Какие-нибудь мысли?

Источник

1 ответ

Решение

Попробуйте изменить это

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

к

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

Вам нужно требовать jQuery сначала иначе highcharts не будет работать правильно, так как расширения не могут быть определены, потому что $ не определено. Также когда я включаю highcharts в моем JS это highcharts/highcharts и я использую его в 3 разных приложениях прямо сейчас без проблем.

Источник
Другие вопросы по тегам