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

Question

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

我想用条形图来比较两周。我想比较两个不同日期的两次。

例如：

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

我可以将小时转换为分钟，所以我有一个整数，但我的条形图也是以分钟为单位。你能帮我吗，这样我就可以使用分钟来计算柱状图，但我的标签和图表应该显示 10:03 而不是 603。

抱歉我的英语不好，这就是我在这里问的原因。我无法 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>

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

Morris.js create other display label for values

charts

label

for-loop

morris.js