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

View

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

第1步：

data-stats 的行不具有空值，如果您有空值，则会出现错误。

像这样：

[
    ['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

查看更多：

Formatting timestamps使用ruby-on-rails

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

1 个答案:

第1步：

第2步：

第3步：