在x轴Morris.js折线图上重复值

时间:2018-02-22 13:59:22

标签: date linechart morris.js

我尝试使用每日统计信息显示折线图。但X轴上的日期似乎在重复。

Link to image

以下是折线图的代码:

    new Morris.Line({
  element: 'chart',
  data: [ @foreach($Data as $data)
        { date: '{{$data['date']}}', value: {{$data['diff']}}},
        @endforeach
    ],
   xkey: ['date'],
   xLabelFormat: function(date) {
      return date.getFullYear() + '/' + (date.getMonth()+1)+ '/' + date.getDate(); 
      },
   xLabelAngle : 50,
   ykeys: ['value'],
   labels: ['Value'],
   resize: true,
   smooth: true,
   lineColors: ['#9ec628'],
  dateFormat: function(date) {
  date = new Date(date);
        return date.getFullYear()+ '/' + (date.getMonth()+1)+ '/' + date.getDate(); 
            },

}); 

I also tried parseTime: false but that's not helping.

1 个答案:

答案 0 :(得分:0)

解决方案是将选项xLabels: 'day'添加到您的配置中,然后每天只显示x轴中的1个值。我在文档http://morrisjs.github.io/morris.js/lines.html

中找到了该选项