圖表js重複兩次的x軸值

Question

我正在使用下面的代碼來生成一個使用圖表js插件的折線圖，其中我正在面對x軸值重複兩次的問題。

function newDate(days) { 
    return moment().add(days, 'd').format('MM/DD'); 
} 

var painChartContext = document.getElementById('pain_chart'); 
    var painChart = new Chart(painChartContext, { 
     type: 'line', 
     data: { 
      labels: [newDate(-7), newDate(-6), newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1)], 
      datasets: [{ 
       label: "Pain", 
       data: [8, 9, 7, 3, 10, 3, 4], 
       fill: false, 
       borderColor: '#b71705', 
       spanGaps: true 
      }] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        type: 'time', 
        time: { 
         displayFormats: { 
          'millisecond': 'MM/DD', 
          'second': 'MM/DD', 
          'minute': 'MM/DD', 
          'hour': 'MM/DD', 
          'day': 'MM/DD', 
          'week': 'MM/DD', 
          'month': 'MM/DD', 
          'quarter': 'MM/DD', 
          'year': 'MM/DD', 
         }, 
         min: '04/13', 
         max: '04/19' 
        }     
       }], 
      }, 
     } 
    }); 

正如我上面提到的，這給了我下面的圖表，其中x軸日期值重複兩次。

另外在我的控制檯中，我收到關於js時刻的警告消息;

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info. 

我認爲是因爲這行代碼;

function newDate(days) { 
    return moment().add(days, 'd').format('MM/DD'); 
} 

請別人給我一個解決方案，謝謝。

Answer 1

因此，chartjs動態創建x軸標籤，並決定每天可以顯示兩個標籤，最後格式化時顯示兩個日期相同。

將新字段unit傳遞給time對象並將其設置爲day。這將導致圖表在時間範圍內每天只顯示一個刻度。 （example fiddle）

options: { 
     scales: { 
      xAxes: [{ 
       type: 'time', 
       time: { 
        unit: 'day', 
       }     
      }], 
     }, 
    }