Morris.js 不会在我的 rails 应用中绘制图形

Question

通过制作项目学习rails。尝试构建图表形式 @resource.prices 数据。一直在关注rails投一下吧。一切都按照显示的方式进行，但在这里没有结果。

这是我的咖啡脚本：

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

正如它所指出的，您传递数据的方式似乎有误，请检查 html 控制台中“#prices_chart”的 data-price 属性，您会看到类似于："#<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']

由你选择最合适的方式，祝你好运！

Morris.js 不会在我的 rails 应用中绘制图形

Morris.js won't draw graph in my rails app

ruby-on-rails

coffeescript

morris.js