代码之家  ›  专栏  ›  技术社区  ›  yer

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

  •  0
  • yer  · 技术社区  · 6 年前

    我试图用每日统计数据显示折线图。但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 回复  |  直到 6 年前
        1
  •  0
  •   Pierre    6 年前

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