骨干收集到morris.js d =“M,0,0”错误

时间:2014-02-17 15:56:11

标签: javascript backbone.js raphael morris.js

您好我正在研究骨干,我已经创建了一个与api一起工作的php api,现在我正在尝试从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"}]

此外,这是我的javascript:

<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 个答案:

答案 0 :(得分:23)

仔细观察后,文档在初始化图形时会提到此属性parseTime:false将其设置为false会阻止插件尝试将x轴上的标签解析为日期/时间。

简短回答添加:parseTime: false