时间戳

首页 > 解决方案 > 从 x 轴莫里斯图中删除重复值

javascript - 从 x 轴莫里斯图中删除重复值

问题描述

我必须使用 morris.js 图表呈现当前月/季度/年数据的系列数据。该系列每天都有数据点，我在 x 轴上看到重复的天数。

jsfiddle

我还尝试使用下面的代码关闭 parseTime 并按照 SO 上的几篇文章中的建议使用 xLabelFormat ，但输出在几天内具有重复值：

Morris.Line({
        element: element,
        data: [
            {"day":"2017-10-01 11:40:09","uniqueUsers":"180","sessions":"213"},
            {"day":"2017-10-01 12:40:09","uniqueUsers":"217","sessions":"213"},
            {"day":"2017-10-02 11:40:09","uniqueUsers":"539","sessions":"635"},
            {"day":"2017-10-03 11:40:09","uniqueUsers":"684","sessions":"826"},
            {"day":"2017-10-04 07:40:09","uniqueUsers":"1095","sessions":"1229"},
            {"day":"2017-10-04 10:40:09","uniqueUsers":"822","sessions":"987"},
            {"day":"2017-10-04 11:40:09","uniqueUsers":"568","sessions":"836"},
            {"day":"2017-10-05 11:40:09","uniqueUsers":"335","sessions":"385"}
        ],
        xkey: 'day',
        xlabels: 'day',
        xLabelFormat: function (x) {
            var d = new Date(x.label.slice(0, 10) + "T" + x.label.slice(11, x.label.length));
            return d.getDate() + ' ' + months[d.getMonth()];
        },
        ykeys: ['uniqueUsers', 'sessions'],
        labels: ['Unique users', 'User sessions'],
        pointSize: 2,
        hideHover: 'auto',
        lineColors: ['rgb(156, 39, 176)', 'rgb(121, 85, 72)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)'],
        xLabelAngle: 50,
        //dateFormat: function (d) {
        //    var ds = new Date(d);
        //    return ds.getDate() + ' ' + months[ds.getMonth()];
        //},
        behaveLikeLine: true,
        parseTime: false
    });

输出

如何删除 x 轴上的重复值？

标签： javascriptmorris.js

解决方案

这些不是多余的值，它们是由 Morris.js 自动格式化的日期。

因此，您有 2 个选择：

  • 要么不解析日期，而只显示“day”的值，方法是将parseTime设置为false
  • 或者您通过将xLabels设置为小时来更改 x 轴上的日期格式

您可以在文档中阅读有关这些设置的更多信息。

推荐阅读