Backbone 网采集到morris.js d=“M,0,0”错误

xam8gpfp  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(122)

你好,我正在学习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
pvcm50d1

pvcm50d11#

仔细查看后,文档中提到了这个属性,当您初始化一个图表parseTime:false时,将其设置为false可以防止插件尝试将x轴上的标签解析为日期/时间。
简短的回答加上一句:parseTime: false

相关问题