X标签上的重复值

我试图创建一个图表来显示Morris.js当前月份的分析信息。当标签中有几天并且重复X轴标签时，会发生问题。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 
     }); 
    } 
}

来源

2017-10-05 amartinez

那么你的问题是什么？你想分组重复的标签吗？ – krlzlx

确切地说，我只需要标签，不要在各自的重点下面重复。 – amartinez

的parseTime属性设置为false避免莫里斯从解析日期和创建重复：

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>

来源

2017-10-06 10:20:51 krlzlx

X标签上的重复值

回答

相关问题