Morris.js не будет рисовать график в моем приложении rails

Question

Изучение рельсов путем создания проекта. Пытается построить данные диаграммы @ resource.prices. Проходили рельсы. Делать все так, как он показывает, но здесь нет результата.

Вот CoffeeScript у меня есть:

jQuery -> 
    Morris.Line 
    element: 'prices_chart' 
    data: $('#prices_chart').data('prices') 
    xkey: 'date' 
    ykeys: ['price'] 
    labels: ['Price'] 

Вот часть моего кода вид файла:

<%= content_tag :div, "", id: "prices_chart", data: {prices: @resource.prices} %> 

Вот что @ resource.prices.inspect выдает:

#<ActiveRecord::Associations::CollectionProxy [ 
#<Price id: 5, resource_id: 8, price: 13, created_at: "2015-12-30 11:59:38", updated_at: "2015-12-30 11:59:38", date: "2015-01-07">, 
#<Price id: 6, resource_id: 8, price: 14, created_at: "2015-12-30 11:59:53", updated_at: "2015-12-30 11:59:53", date: "2015-02-05">, 
#<Price id: 7, resource_id: 8, price: 15, created_at: "2015-12-30 12:00:03", updated_at: "2015-12-30 12:00:03", date: "2015-03-26">, 
...]> 

Как мы видим, он содержит как цену, так и дату. Но график по-прежнему пуст. Что может быть неправильным? И каковы три точки в конце массива?

UPD Там допущена ошибка в консоли указывая на morris.js: Uncaught TypeError: Cannot read property 'match' of null

Answer 1

Как указывает, вы, казалось, неправильный способ передачи данных, проверьте атрибут «#prices_chart» data-price в консоли html, и вы увидите что-то вроде: "#<ActiveRecord::Associations...", это не массив JSON и, конечно, он не может работать.

Обходной для вашей ситуации, проходящей ваш @prices в JSON строку:

<%= content_tag :div, "", id: "prices_chart", data: {prices: @resource.prices.to_json } %> 

Однако более элегантный способ сделать это с помощью Ajax для извлечения данных в формате JSON

jQuery -> 
    $.ajax 
    url: # your api endpoint 
    data: # your data 
    success: (data) -> 
     Morris.Line 
     element: 'prices_chart' 
     data: data 
     xkey: 'date' 
     ykeys: ['price'] 
     labels: ['Price'] 

Это до вас, чтобы выбрать наиболее подходящий путь, удачи!