Question

我想使用Morris.js，但我遇到了问题。

我想用条形图在两周之间进行比较。我想在两个不同的日子里比较两次。

例如：

今天：10：03 最后一天：3：34

我可以用分钟转换小时，所以我有一个整数，但我的条形图也是几分钟。你可以帮助我，所以我可以使用会议记录来计算酒吧，但我的标签和我的图表应该显示10:03而不是603.

抱歉我的英语不好，这就是我在这里问的原因。我无法谷歌，因为我完全不知道我应该如何谷歌这一点。

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>

Morris.js为值创建其他显示标签

1 个答案: