Rails - диаграмма Morris не отображается

Question

Я новичок в Rails и в настоящее время пытаюсь разработать интерфейс моего собственного проекта.

Я хотел бы использовать MorrisJs для отображения диаграмм, поэтому я использовал драгоценности «morrisjs-rails» и «raphael-rails» и потребовал morris и raphael в файле application.js.

Тогда, я стараюсь следовать учебник от railscast: (Youtube Link Here), я скопировал пример кода из morrisjs официального сайта и перевел его на CoffeeScript по js2coffee2.0 и создать файл с именем chart.js.coffee под application/assets/javascripts. Кроме того, добавлен элемент в мой html-файл - <div id="myfirstchart" style="height: 150px;"></div>

Однако он не отображает диаграмму, а просто пустую область, и выдается сообщение об ошибке «Ошибка нечистоты: элемент контейнера графа» не найден.

Итак, я нашел потенциальное решение от tiraeth, говоря, что

JavaScript's code gets executed before the DOM contains #annual element. Put the javascript after the div or use jQuery.ready().

Итак, как я мог бы поставить JavaScript после содержимого страницы? Я смущен о том, разрешает ли мне конвейер активов делать это или нет.

Кроме того, я видел, что руководство railscast действительно отображало диаграмму morris надлежащим образом, не испортив файл applicaiton.js, но просто добавляя // = require morris и // = требовать raphael. Интересно, почему я не могу отобразить его соответствующим образом, делая то же самое?

FYI, мой application.js, как

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
.. require something else .. 
//= require raphael 
//= require morris 
//= require_tree . 

Update Ниже приведен код моего chart.js.coffee. Он не получает непонятную ошибку, но все еще показывает пустую область.

$ -> 
    new (Morris.Line)(
    element: 'myfirstchart' 
    data: [ 
     { 
     year: '2008' 
     value: 20 
     } 
     { 
     year: '2009' 
     value: 10 
     } 
     { 
     year: '2010' 
     value: 5 
     } 
     { 
     year: '2011' 
     value: 5 
     } 
     { 
     year: '2012' 
     value: 20 
     } 
    ] 
    xkey: 'year' 
    ykeys: [ 'value' ] 
    labels: [ 'Value' ]) 
    return 

Спасибо, что прочитали мои вопросы и оцените любые мнения и предложения. Благодарю.

Answer 1

Если вы не дождались загрузки DOM до вызова диаграммы, элемент контейнера не будет существовать. Вам нужно обернуть код в chart.js в тегах готового документа. Если вы используете JQuery:

$(document).ready(function() { 
    // code goes here... 
}); 

Или CoffeeScript:

$ -> 
    # code goes here...