Morris.jsのカスタムホバーレジェンドバーチャート

Question

積み上げ棒グラフのホバーの凡例をカスタマイズして、特定のバーに値を持たず他のバーに表示されるラベルを表示しないようにしたいと考えています。うまくいけば、下のリンクにある写真は、物事をクリアするのに役立ちます。ピクチャ内の3行目のラベルは、わずかなラベルの値を持ちますが、すべてのラベルを表示します。私は、hoverCallback関数を使用する必要があることを知っていますが、私はどのようにデータだけでラベルの内容を返すかわかりません。以下は、棒グラフのmorris.jsウェブページへのリンクです：morris.js。どのように行データや可能な解決策を読むかについてのご意見は非常に役に立ちます。事前に助けてくれてありがとう！

モリスグラフ

Answer 1

これを試してみてください：

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>