Benutzerdefinierte Hover Legend für Morris.js Balkendiagramm

Question

Ich suche die Hover-Legende auf meinem gestapeltes Balkendiagramm zu gestalten, damit es nicht Etiketten zeigen, die keine Werte in einer bestimmten Bar, aber in anderen Bars zeigen. Hoffentlich hilft das Bild in dem Link unten, um Dinge zu klären. Das Etikett für März im Bild hat Werte für nur ein paar Etiketten, zeigt sie aber alle an. Ich weiß, dass ich die HoverCallback-Funktion verwenden muss, aber ich bin nicht sicher, wie nur Inhalt für Etiketten mit Daten zurückgegeben wird. Im Folgenden finden Sie einen Link zur morris.js-Webseite in Balkendiagrammen: morris.js. Irgendwelche Vorschläge, wie man die Zeilendaten oder mögliche Lösungen liest, wäre sehr hilfreich. Danke für die Hilfe im Voraus!

Morris Graph

Answer 1

Versuchen Sie folgendes:

new Morris.Bar({ 
 
    element: 'bar-example', 
 
    data: [ 
 
    { t: "a", a: 2, b: 5, c: 2 }, 
 
    { t: "b", a: 3, b: null, c: null }, 
 
    { t: "c", a: 4, b: 8, c: 12 }, 
 
    { t: "d", a: null, b: 9, c: 15 } 
 
    ], 
 
    xkey: 't', 
 
    ykeys: ['a', 'b', 'c'], 
 
    labels: ['Spotify', 'Apple', 'Uber'], 
 
    stacked: true, 
 
    hoverCallback: function (index, options, content, row) { 
 
    var finalContent = $(content); 
 
    var cpt = 0; 
 

 
    $.each(row, function (n, v) { 
 
     if (v == null) { 
 
     $(finalContent).eq(cpt).empty(); 
 
     } 
 
     cpt++; 
 
    }); 
 

 
    return finalContent; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/> 
 

 
<div id="bar-example"></div>