Question

通过制作项目学习rails。尝试构建@ 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

正如它指出的那样，您似乎有错误的方式传递数据，检查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应用程序中绘制图形

1 个答案: