[英]Morris.js create graph data-attributes [rails4]
I'm trying to show statistics with morris.js . 我正试图用morris.js显示统计数据。
But I always got this error msg in the Firebug console. 但我总是在Firebug控制台中收到此错误消息。
TypeError: this.options.data is undefined
clients_controller: clients_controller:
@stats = @user.treatments.pluck( :created_at, :effective )
show.html.erb show.html.erb
<%= content_tag :div, "", id: "graph1337", data: { stats: @stats } %>
Javascript code version 1: Javascript代码版本1:
$(function () {
Morris.Line({
element: 'graph1337',
data: $('#graph1337').data('stats'),
xkey: 'created_at',
ykeys: ['effective'],
labels: ['effective' ]
});
});
Error msg: 错误消息:
TypeError: e is undefined
Javasciprt code version 2: 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' ]
});
});
I did 2 versions because I think that this is some kind of a 2 dimensional array. 我做了两个版本因为我认为这是一种二维数组。 So I've tried to make one(lik Ruby flatten ). 所以我试图制作一个(比如Ruby flatten )。
if I inspect the DOM element with Firebug: 如果我用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: 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
It's either not showing anything or it's the same error, any suggestions? 它要么没有显示任何内容,要么是相同的错误,任何建议? Thank you for your time. 感谢您的时间。
For your script work you need 3 modifications. 对于您的脚本工作,您需要3次修改。 (There doesn't have enough element for that I give the ruby-on-rails script but I think that my advices will guide you). (没有足够的元素,我给ruby-on-rails脚本,但我认为我的建议将指导你)。
The line of the data-stats doesn't have null value, if you have null value you get an error. data-stats的行没有null值,如果你有null值,你会得到一个错误。
Like this : 像这样 :
[
['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]
],
You set bad value to xkey, an ykey. 你将坏值设置为xkey,一个ykey。 The value must to be key of the value in your array. 该值必须是数组中值的键。
You get this : 你得到这个:
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"]
});
Replace string date by timestamp and use dateFormat function. 用时间戳替换字符串日期并使用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"]
});
Demo : http://jsbin.com/zatoyudo/1/edit 演示: http : //jsbin.com/zatoyudo/1/edit
See more : 查看更多 :
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.