未捕获的TypeError:当没有数据图表

时间:2017-02-01 08:44:25

标签: javascript jquery raphael morris.js

错误:

  morris.min.js:6 Uncaught TypeError: Cannot read property 'label' of undefined
at d.b.Bar.d.hoverContentForRow (morris.min.js:6)
at d.b.Bar.d.onHoverMove (morris.min.js:6)
at morris.min.js:6
at d.b.EventEmitter.a.fire (morris.min.js:6)
at HTMLDivElement.<anonymous> (morris.min.js:6)
at HTMLDivElement.dispatch (jquery.min.js?v=1.6.10:3)
at HTMLDivElement.r.handle (jquery.min.js?v=1.6.10:3)
    当图表中的数据为空时,会出现
  • 错误。
  • 我该如何解决这个问题

错误是条形图

js code

var httpRequest = $http({
  method: 'GET',
  url: root_url,
}).success(function(json3, status) {
  $scope.res3 = json3.data;


  Morris.Bar({
    element: 'chart_priority',
    data: json3.data, // use returned data to plot the graph,
    xkey: 'priority',
    ykeys: ['value'],
    labels: ['Logs'],
    hideHover: 'auto',
    resize: true,
    //
  });
});

morris js抛出错误

      d.prototype.hoverContentForRow = function(a) {
        var b, c, d, e, f, g, h, i;
        for (d = this.data[a],
        b = "<div class='morris-hover-row-label'>" + d.label + "</div>",
        i = d.y,
        c = g = 0,
        h = i.length; h > g; c = ++g)
            f = i[c],
            b += "<div class='morris-hover-point' style='color: " + this.colorFor(d, c, "label") + "'>\n  " + this.options.labels[c] + ":\n  " + this.yLabelFormat(f) + "\n</div>";
        return "function" == typeof this.options.hoverCallback && (b = this.options.hoverCallback(a, this.options, b, d.src)),
        e = this.left + (a + .5) * this.width / this.data.length,
        [b, e]
    }
    ,
  • 解决方案我需要如何解决morris js中的标签未定义问题。

  • 当某个ajax调用的数据为空时。

解决方案我也试过

  There are few more things here.

让我们看下面的事件时间表。

首次通过ajax使用正确的.data呈现Morris.Line 第二次,当数据对象为空时,Chart完全不可用 第三次,当我们通过ajax在同一图表上渲染数据时。什么都没发生。 就像你建议的那样,我可以在UI中处理它。实现或遇到此类情况的每个人都必须自己实现此占位符消息。相反,如果我们可以在图书馆本身处理它,那么每个人都可以从中受益,图书馆更具防御性。

让我们采用占位符方法

第一次,使用来自ajax的数据渲染Morris.Line 第二次,数据是空的。而不是调用.setData()隐藏由Morris呈现/管理的div元素,并使用span显示占位符消息。 第三次,当数据正确时,删除跨度并重新渲染Morris.Line 我建议在库本身中实现此功能,以便库更加防御此类运行时问题。

1 个答案:

答案 0 :(得分:1)

对我有用的解决方案

              method: 'GET',
                url: root_url
            }).success(function (json3, status) {
                $scope.res3 = json3.data;


                if(json3.length==0 ||json3.data==undefined)
                {
                   // alert("data undefined");
                    $("#chart_priority").parent().attr("class","hide");
                       $("#prioritys").hide();
                    var priority_graph=[ { label:"Logs", value:0 } ];
                }
                else
                {
                   $("#chart_priority").parent().attr("class","show");

                    var   priority_graphs=json3.data;

            }
                Morris.Bar({  
                element: 'chart_priority',
                data:json3.data?priority_graphs:priority_graph,
                //data:json3.data,
                label:'Logs',
                xkey: 'priority',
                ykeys: ['value'],
                labels: ['Logs'],

                });