Chart.js：データポイントのX軸のラベルのみを表示

Question

私はChart.jsを使用してグラフを作成していますが、折れ線グラフのx軸に関して問題があります。私は複数行のグラフを作っており、下の画像で見られるようにすべてが大丈夫です。 私が望むのは、グラフ上にデータポイントがある場合、x軸のラベル（日付）のみが表示されるため、現在のようにすべての日が表示されないことです。私はウェブ開発全体の経験があまりないので、どんな助けもありがたいです。前もって感謝します。

私のコード、そのまま：

function newDate(day, month) { 
    return moment().date(day).month(month); 
} 

var ctx = document.getElementById("chart_hr"); 
var tabPane = document.getElementById("overview_hr"); 
var data = { 
    labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)], 
    datasets: [ 
     { 
      fill: false, 
      data: [140, 180, 150, 150, 180, 150, 150, 150, 170], 
      lineTension: 0, 
     }, 
     { 
      fill: false, 
      data: [80, 100, 80, 80, 80, 80, 100, 80, 100], 
      lineTension: 0, 
     } 
    ] 
}; 
var options = { 
    scales: { 
     xAxes: [{ 
     type: 'time', 
     time: { 
      displayFormats: { 
      'millisecond': 'DD MMM', 
      'second': 'DD MMM', 
      'minute': 'DD MMM', 
      'hour': 'DD MMM', 
      'day': 'DD MMM', 
      'week': 'DD MMM', 
      'month': 'DD MMM', 
      'quarter': 'DD MMM', 
      'year': 'DD MMM', 
      }, 
      unitStepSize: 1, 
      unit: 'day', 
     }, 
     gridLines : { 
      display : false, 
     } 
     }], 
     yAxes: [{ 
     ticks: { 
      min: 50, 
      max: 190, 
      stepSize: 10, 
     } 
     }], 
    }, 
}; 
var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: options 
}); 

Answer 1

を私はコールバックメソッドダニとAUTOSKIP偽を設定することにより、を使用することによって、この問題を解決しています。しかし、私はタイムスケールを使用していません。コールバックでは、日付と希望する書式を渡すことができます。書式設定された日付が返されます。
以下は、同じサンプルコードと実際のサンプルコードのスクリーンショットです。

[サンプルコード]

var ctx = document.getElementById("chart_hr"); 
    function newDate(day, month) { 
     return moment().date(day).month(month); 
    } 


var data = { 
    labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)], 
    datasets: [ 
     { 
      fill: false, 
      data: [140, 180, 150, 150, 180, 150, 150, 150, 170], 
      lineTension: 0, 
     }, 
     { 
      fill: false, 
      data: [80, 100, 80, 80, 80, 80, 100, 80, 100], 
      lineTension: 0, 
     } 
    ] 
}; 
var options = { 
    scales: { 
     xAxes: [{ 
      ticks: { 
       autoSkip : false, 
       callback: function(value, index, values) { 
        return new moment(value).format('DD MMM'); 
       } 
      }, 
      gridLines : { 
       display : false, 
      } 
     }], 
     yAxes: [{ 
      ticks: { 
       min: 50, 
       max: 190, 
       stepSize: 10 
      } 
     }], 
    }, 
}; 
var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: options 
});