从 x 轴莫里斯图中删除重复值答案

【问题标题】：Remove duplicate values from x-axis morris charts从 x 轴莫里斯图中删除重复值
【发布时间】：2021-06-08 03:27:08
【问题描述】：

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

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

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 轴上的重复值？

【问题讨论】：

标签： javascript morris.js

【解决方案1】：

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

因此，您有两个选择：

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

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

【讨论】：