2017-02-01 2 views
2

Fehler:Uncaught Typeerror: kann Eigenschaft 'Label' undefinierter lesen, wenn keine Daten grafisch darstellen

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) 
  • Fehler angezeigt, wenn Daten in Diagrammen null ist.
  • wie kann ich dieses Problem lösen

Fehler Balkendiagramme

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 wo Fehler

 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] 
    } 
    , 
  • Lösung geworfen wurden Ich brauche, wie das Etikett undefined Problem in Morris js lösen kann.

  • Wenn Daten für bestimmte Ajax-Aufruf ist Null. i

Lösung auch versucht

There are few more things here. 

Läßt die unten Chronologie der Ereignisse nehmen.

Zum ersten Mal Morris.Line ist mit dem richtigen .data über Ajax zum zweiten Mal wiedergegeben, wenn das Datenobjekt leer ist, Chart ist vollständig nicht mehr benutzen Zum dritten Mal, wenn wir auf dem gleichen Chart mit Daten über Ajax machen. nichts passiert. Wie Sie vorgeschlagen haben, kann ich es in der Benutzeroberfläche behandeln. Jeder, der eine solche Situation implementiert oder begegnet, muss diese Platzhalter-Nachricht selbst implementieren. Wenn wir in der Bibliothek selbst damit umgehen können, können alle davon profitieren und die Bibliothek ist defensiver.

mit Platzhalter Ansatz Lets go

Zum ersten Mal wird Morris.Line mit Daten von Ajax gemacht zweites Mal Daten sind leer. Anstatt .setData() aufzurufen, wird das div-Element, das von Morris gerendert/verwaltet wird, ausgeblendet und eine Platzhalter-Nachricht mit span angezeigt. Zum dritten Mal, wenn die Daten korrekt sind, entfernen Sie den Span und Rendern der Morris.Line Ich würde empfehlen, diese Funktion in der Bibliothek selbst zu implementieren, so dass die Bibliothek defensiver zu solchen Laufzeitproblemen ist.

+0

Welche Version von Morris sind Sie mit? Dieses Problem wurde in der neuesten Version 0.51 behoben (siehe [Leere Daten bewirken, dass Diagramm # 142 bricht] (https://github.com/morrisjs/morris.js/issues/142)). – krlzlx

Antwort

1

Lösung, die für mich gearbeitet

   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'], 

       }); 
Verwandte Themen