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

Я решил эту проблему с помощью клещей метода обратного вызова и установки ложных автоматического пропуска. Однако я не использую Timescale. В обратном вызове вы можете передать дату и нужный формат, чтобы вернуть форматированную дату.
Ниже приведен скриншот для того же и рабочего образца кода.

[образец кода]

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 
});