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

请尝试以下代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

X标签上的重复值

1 个答案: