javascript - 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' ]
          });
      });

我做了 2 个版本，因为我认为这是某种二维数组。所以我试着做了一个(像 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 @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 脚本没有足够的元素，但我认为我的建议会指导你)。

第一步:

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