Morris.js创建图数据属性[rails4]

Question

我正试图用morris.js显示统计数据。

但我总是在Firebug控制台中收到此错误消息。

TypeError: this.options.data is undefined

clients_controller：

 @stats = @user.treatments.pluck( :created_at, :effective )

show.html.erb

 <%= content_tag :div, "", id: "graph1337", data: { stats: @stats } %> 

Javascript代码版本1：

  $(function () {
      Morris.Line({
          element: 'graph1337',
          data: $('#graph1337').data('stats'),
          xkey: 'created_at',
          ykeys: ['effective'],
          labels: ['effective' ]
      }); 
  });

错误消息：

TypeError: e is undefined

Javasciprt代码版本2：

  $(function () {
   var stats = $('#graph1337').data('stats');                               
     Morris.Line({
          element: 'graph1337',
          data: $.map(stats, function(element) { JSON.stringify(element)}),
          xkey: 'created_at',
          ykeys: ['effective'],
          labels: ['effective' ]
          });
      });

我做了两个版本因为我认为这是一种二维数组。 所以我试图制作一个（比如Ruby flatten ）。

如果我用Firebug检查DOM元素：

<div id="graph1337" data-stats="[["2014-07-11T14:44:16.528Z",5],["2014-07-11T14:41:33.340Z",4],["2014-07-11T13:58:11.967Z",3],[null,5],[null,4],[null,3],[null,2],["2014-06-08T09:47:16.260Z",1]]" style="position: relative;">
<svg height="342" version="1.1" width="1140" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.5px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>
</svg>
<div class="morris-hover morris-default-style" style="display: none;"></div>
</div>

rails debug msg：

<%= debug @stats %>
---
- - 2014-07-11 14:44:16.528543000 Z
  - 5
- - 2014-07-11 14:41:33.340103000 Z
  - 4
- - 2014-07-11 13:58:11.967193000 Z
  - 3
- - 
  - 5
- - 
  - 4
- - 
  - 3
- - 
  - 2
- - 2014-06-08 09:47:16.260312000 Z
  - 1

它要么没有显示任何内容，要么是相同的错误，任何建议？ 感谢您的时间。

Answer 1

对于您的脚本工作，您需要3次修改。 （没有足够的元素，我给ruby-on-rails脚本，但我认为我的建议将指导你）。

第1步 ：

data-stats的行没有null值，如果你有null值，你会得到一个错误。

像这样 ：

[
    ['2014-07-11T14:44:16.528Z', 5],
    ['2014-07-11T14:41:33.340Z', 4],
    ['2014-07-11T13:58:11.967Z', 3],
    ['2014-06-08T09:47:16.260Z', 1]
],

第2步 ：

你将坏值设置为xkey，一个ykey。 该值必须是数组中值的键。

你得到这个：

Morris.Line({
    element: 'graph1337',
    data: [
        ['2014-07-11T14:44:16.528Z', 5],
        ['2014-07-11T14:41:33.340Z', 4],
        ['2014-07-11T13:58:11.967Z', 3],
        ['2014-06-08T09:47:16.260Z', 1]
    ],
    xkey: "0",
    ykeys: ["1"],
    labels: ["effective"]
});

第3步：

用时间戳替换字符串日期并使用dateFormat函数。

var stats = $('#graph1337').data('stats');

Morris.Line({
    element: 'graph1337',
    data: [
        [1405082656528, 5],
        [1405082493340, 4],
        [1405079891967, 3],
        [1405064836260, 1]
    ],
    dateFormat: function (x) { return new Date(x).toLocaleTimeString(); },
    xkey: "0",
    ykeys: ["1"],
    labels: ["effective"]
});

演示： http ： //jsbin.com/zatoyudo/1/edit

查看更多 ：

• 使用ruby-on-rails 格式化时间戳