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

Question

我正在尝试显示包含每日统计信息的折线图。但是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.

Answer 1

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

中找到了该选项

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

Repeating values on x-axis Morris.js line chart

date

linechart

morris.js