你好,我正在学习backbone,我已经创建了一个php api来使用backbone,现在我正在尝试用morris绘制一个从get请求中检索到的集合。
下面是我从php脚本中检索到的数据:
[{"m":"Mar","t":"92","e":"8","p":"64"},{"m":"Apr","t":"0","e":"0","p":"0"},{"m":"May","t":"60","e":"20","p":"40"},{"m":"Jun","t":"50","e":"6","p":"44"},{"m":"Jul","t":"160","e":"30","p":"130"},{"m":"Aug","t":"50","e":"6","p":"44"},{"m":"Sep","t":"0","e":"0","p":"0"},{"m":"Oct","t":"120","e":"12","p":"108"},{"m":"Nov","t":"50","e":"10","p":"40"},{"m":"Dec","t":"182","e":"22","p":"40"},{"m":"Jan","t":"380","e":"112","p":"168"},{"m":"Feb","t":"0","e":"0","p":"0"}]
这是一个很好的例子。
<div class="row">
<div id="dashboardMainGraph"></div>
</div>
<script>
Month = Backbone.Model.extend({
default:{
m:'',
t:0,
e:0,
p:0
}
});
DashboardMainDiagram = Backbone.Collection.extend({
model: Month,
url: '/api/getDashboardMainGraph'
});
Diagram = Backbone.View.extend({
el: $('#dashboardMainGraph'),
initialize:function(){
console.log('initializing')
var self = this,
coll = new DashboardMainDiagram();
coll.fetch({
success: function(data){
self.draw(data.toJSON());
}
});
},
draw:function(d) {
console.log(JSON.stringify(d))
window.m = new Morris.Line({
// ID of the element in which to draw the chart.
element: this.el,
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: d,
xkey: 'm',
ykeys: ['t', 'e', 'p'],
labels: ['Total', 'Expenses', 'Profit']
});
}
})
var diagram = new Diagram();
</script>
这是我在控制台中遇到的错误:
Error: Problem parsing d="M,0,0" raphael-min.js:10
q raphael-min.js:10
w raphael-min.js:10
a._engine.path raphael-min.js:10
k.path raphael-min.js:10
t.Line.n.drawLinePath morris-0.4.3.min.js:1
t.Line.n._drawLineFor morris-0.4.3.min.js:1
t.Line.n.drawSeries morris-0.4.3.min.js:1
t.Line.n.draw morris-0.4.3.min.js:1
t.Grid.r.redraw morris-0.4.3.min.js:1
t.Grid.r.setData morris-0.4.3.min.js:1
r morris-0.4.3.min.js:1
n morris-0.4.3.min.js:1
Backbone.View.extend.draw dashboard:164
coll.fetch.success dashboard:157
t.success backbone-min.js:1
j jquery-2.1.0.min.js:2
k.fireWith jquery-2.1.0.min.js:2
x jquery-2.1.0.min.js:4
(anonymous function) jquery-2.1.0.min.js:4
1条答案
按热度按时间pvcm50d11#
仔细查看后,文档中提到了这个属性,当您初始化一个图表
parseTime:false
时,将其设置为false可以防止插件尝试将x轴上的标签解析为日期/时间。简短的回答加上一句:parseTime: false