X 标签上的重复值

Question

我正在尝试创建一个图表来显示 Morris.js 当前月份的分析信息。当标签中的天数很少并且 X 轴标签重复时会出现此问题。

问题图片：

到目前为止的代码：

$(function () {
    getMorris('area', 'area_chart');
});

function getMorris(type, element) {
    if (type === 'area') {

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        Morris.Line({
            element: element,
            data: [{"day":"2017-10-01 11:40:09","uniqueUsers":"180","sessions":"213","pageViews":"616","bounces":"131"},{"day":"2017-10-02 11:40:09","uniqueUsers":"539","sessions":"635","pageViews":"1645","bounces":"395"},{"day":"2017-10-03 11:40:09","uniqueUsers":"684","sessions":"826","pageViews":"2189","bounces":"534"},{"day":"2017-10-04 11:40:09","uniqueUsers":"1095","sessions":"1229","pageViews":"2801","bounces":"806"},{"day":"2017-10-05 11:40:09","uniqueUsers":"335","sessions":"385","pageViews":"925","bounces":"235"}],
            xkey: 'day',
            xlabels: 'day',
            xLabelFormat: function (x) {
                return x.getDate() + ' ' + months[x.getMonth()];
            },
            ykeys: ['uniqueUsers', 'sessions', 'pageViews', 'bounces'],
            labels: ['Unique users', 'User sessions', 'Page views', 'Bounces'],
            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
        });
    }
}

Answer 1

将 parseTime 属性设置为 false 以避免 Morris 解析日期并创建重复日期：

parseTime: false

然后，您必须在 xLabelFormat 函数中解析日期字符串，在日期和日期时间之间添加一个 T，如下所示：

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()];
}

请尝试以下代码段：

$(function () {
    getMorris('area', 'area_chart');
});

function getMorris(type, element) {
    if (type === 'area') {
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        Morris.Line({
            element: element,
            data: [
                {"day":"2017-10-01 11:40:09","uniqueUsers":"180","sessions":"213","pageViews":"616","bounces":"131"},
                {"day":"2017-10-02 11:40:09","uniqueUsers":"539","sessions":"635","pageViews":"1645","bounces":"395"},
                {"day":"2017-10-03 11:40:09","uniqueUsers":"684","sessions":"826","pageViews":"2189","bounces":"534"},
                {"day":"2017-10-04 11:40:09","uniqueUsers":"1095","sessions":"1229","pageViews":"2801","bounces":"806"},
                {"day":"2017-10-05 11:40:09","uniqueUsers":"335","sessions":"385","pageViews":"925","bounces":"235"}
            ],
            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', 'pageViews', 'bounces'],
            labels: ['Unique users', 'User sessions', 'Page views', 'Bounces'],
            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
        });
    }
}

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

X 标签上的重复值

Repeated values on X label

morris.js