Javascript не отображается в Rails 4. (Highchart)

Question

Я включил Highcharts в более простое приложение Rails, и он отлично работает. но когда я сделал то же самое в более сложном Rails-приложении, код Javascript Диаграмма не появляется.

вот что я сделал до сих пор:

Gemfile

gem "highcharts-rails", "~> 3.0.0" 

application.js

//= require highcharts 
//= require highcharts/highcharts-more 

show.html.erb

<div class="panel panel-default"> 
    <div class="panel-heading">Chart</div> 
    <div id="container" style="width:100%; height:400px;"> 
    </div> 
<script type="text/javascript" charset="utf-8"> 
$(function() { 
    $(document).ready(function() { 
     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 

     var chart; 
     $('#container').highcharts({ 
      chart: { 
       type: 'spline', 
       animation: Highcharts.svg, // don't animate in old IE 
       marginRight: 10, 
       events: { 
        load: function() { 

         // set up the updating of the chart each second 
         var series = this.series[0]; 
         setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
           y = Math.random(); 
          series.addPoint([x, y], true, true); 
         }, 1000); 
        } 
       } 
      }, 
      title: { 
       text: 'Live random data' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
         Highcharts.numberFormat(this.y, 2); 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Random data', 
       data: (function() { 
        // generate an array of random data 
        var data = [], 
         time = (new Date()).getTime(), 
         i; 

        for (i = -19; i <= 0; i++) { 
         data.push({ 
          x: time + i * 1000, 
          y: Math.random() 
         }); 
        } 
        return data; 
       })() 
      }] 
     }); 
    }); 

}); 
</script> 
</div> 

Кто-нибудь знает, что я сделал не так? Google говорит, что это может иметь какое-то отношение к турболинкам, но тогда оно не будет работать и в другом приложении ...

И быстрый второй вопрос. Как я могу добавить этот код в channel.js.coffee, так что на этой странице нет js? благодарим заранее!

Answer 1

захватить последний источник Highcharts, он исправляет эту проблему: code.highcharts.com

Answer 2

я столкнулся с чем-то очень похожее на это, когда я начал работать с Highcharts. Я знаю, что этот вопрос немного устарел, но я хотел написать его для справки, если кто-то еще столкнется с этой проблемой.

Вот что я сделал, чтобы получить мои графики работы (для справки, я бег Rails 4.0.2 и 2.1.1 рубина и последние Highcharts с последним Highcharts рельсов камня.):

Во-первых, убедитесь, что все файлы highcharts.js загружены в ваш каталог assets/javascript.

В файле application.js, вы должны иметь следующее в указанном порядке:

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

Во-вторых, чтобы получить код из файла show.html.erb, я не знаю, о CoffeeScript , но вы можете создать js-файл в/assets/javascript под названием chart.js. Поместите JavaScript в этот файл, начиная с

$(function() { 

Убедитесь, что («#container») в вашем chart.js соответствует идентификатору DIV в файле html.erb. Как это:

/assets/javascript/chart.js

$('#container').highcharts({ 

show.html.erb:

<div id="container" style="width:100%; height:400px;"></div> 

мне не нужно, чтобы удалить или отключить turbolinks, чтобы получить какой-либо из это работать. Однако, когда я настраивал свои навигационные ссылки, я хотел, чтобы мои страницы обновлялись при повторном открытии (чтобы обеспечить получение последней информации, а не кэшированной информации), поэтому в моем навигаторе я удалил функциональность turbolinks, добавив данные no-turbolinks на панель навигации, содержащую мои ссылки.Как следует:

<div class="nav" data-no-turbolink> 
    ... navbar code here 
</div> 

Вот ссылка на GitHub репо для turbolinks - читать документацию, поскольку это дает хорошую информацию о том, что turbolinks делает, почему это полезно, и (если вы не хотите использовать его), как выключить его. https://github.com/rails/turbolinks/blob/master/README.md

Последнее: когда я наконец получил свои диаграммы для рендеринга (tada!), У них были применены темы высоких тембров. Я просто удалил папку с высокой скоростью из/assets/javascript, и они отлично смотрятся.