Morris.jsは値の他の表示ラベルを作成します

Question

私はMorris.jsを使用したいが問題がある。

棒グラフを使用して2週間の比較を行いたいと思います。 私は2つの異なる日に2回比較したいです。例えば

：

この日：10時03分 最後の日：午前3時34

私はそのように、私は整数を持っていますが、私の棒グラフが数分でもある分単位で時間を変換することができます。あなたは私を助けることができるので、バーの計算に分を使用することができますが、ラベルと私のグラフは603の代わりに10:03を表示する必要があります。

私はここで私が尋ねる理由は申し訳ありません。私はGoogleにこれをどのようにすべきかわからないので、私はそれをGoogleにすることができません。

Answer 1

hoverCallbackを使用して、必要なものを達成することができます。

ykeysを繰り返し、2桁の数字で時間と分を取得し（必要に応じて0を加算）、現在の整数値row[v]をhours:minutesフォーマットに置き換えます。

new Morris.Bar({ 
 
    element: 'chart', 
 
    data: [ 
 
     { t: "Week1", a: 63, b: 105 }, 
 
     { t: "Week2", a: 33, b: 247 } 
 
    ], 
 
    xkey: 't', 
 
    ykeys: ['a', 'b'], 
 
    labels: ['This Day', 'Last Day'], 
 
    stacked: false, 
 
    hoverCallback: function (index, options, content, row) { 
 
     var finalContent = content; 
 

 
     $.each(options.ykeys, function (i, v) { 
 
      var hours = ("0" + Math.floor(row[v]/60)).slice(-2); 
 
      var minutes = ("0" + row[v] % 60).slice(-2); 
 
      finalContent = finalContent.replace(row[v], hours + ":" + minutes); 
 
     }); 
 

 
     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="chart"></div>

：

次のスニペットを試してみてください