未捕获的TypeError:无法读取未定义的Morris.js的属性“x”

时间:2014-07-17 06:22:38

标签: javascript jquery json morris.js

我疯了,我无法弄清楚造成这个错误的原因。

我的Javascript:

<script>
$(document).ready(function() {


        var jqxhr = $.getJSON("rest/scriptruns/VeloxMorgana", function() {
            //VeloxMorgana.setData('[{"period":"2014-07-15","VeloxMorgana":1},{"period":"2014-07-16","VeloxMorgana":47}]');
        });

        jqxhr.complete(function() {
            if ($('#VeloxMorgana').length) {
                var week_data = jqxhr;
                var VeloxMorgana = Morris.Line({
                    element : 'VeloxMorgana',
                    data : week_data,
                    xkey : 'period',
                    ykeys : ['VeloxMorgana'],
                    labels : ['VeloxMorgana'],
                    events : ['2014-07-10', '2014-07-17']
                });
            }
        });

    });
</script>

我的HTML

<!-- Widget ID (each widget will need unique ID)-->
        <div class="jarviswidget" id="wid-id-7" data-widget-editbutton="false">
            <!-- widget options:
            usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

            data-widget-colorbutton="false"
            data-widget-editbutton="false"
            data-widget-togglebutton="false"
            data-widget-deletebutton="false"
            data-widget-fullscreenbutton="false"
            data-widget-custombutton="false"
            data-widget-collapsed="true"
            data-widget-sortable="false"

            -->
            <header>
                <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                <h2>Time Graph</h2>

            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->

                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body no-padding">

                    <div id="VeloxMorgana" class="chart no-padding"></div>

                </div>
                <!-- end widget content -->

            </div>
            <!-- end widget div -->

        </div>
        <!-- end widget -->

当我静态设置数据时加载它,但是当我使用JSON时它只是怪胎。

这是我在使用ajax json功能和加载数据调用它时加载的JSON(我尝试将其直接放入完成json请求的数据中,结果相同)。

[  
   {  
      "period":"2014-07-15",
      "VeloxMorgana":1
   },
   {  
      "period":"2014-07-16",
      "VeloxMorgana":47
   }
]

1 个答案:

答案 0 :(得分:1)

jqxhr只是XHR请求的promise对象,它实际上并不包含收到的数据。

由于你根本没有真正处理失败,我建议你立即使用成功的回调:

$.getJSON("rest/scriptruns/VeloxMorgana", function(data) {
    if ($('#VeloxMorgana').length) {
        Morris.Line({
            element : 'VeloxMorgana',
            data : data,
            xkey : 'period',
            ykeys : ['VeloxMorgana'],
            labels : ['VeloxMorgana'],
            events : ['2014-07-10', '2014-07-17']
        });
    }
});

此外,documentation州:

  

自jQuery 1.8起,jQuery 1.5中引入的jqXHR.success()jqXHR.error()jqXHR.complete()回调方法已弃用。