Chart.js: Zeige nur Labels auf der x-Achse für Datenpunkte

Question

Ich mache ein Diagramm mit Chart.js und habe ein Problem in Bezug auf die x-Achse meines Liniendiagramms. Ich habe eine Multi-Liniendiagramm erstellt und alles sieht gut aus, wie Sie auf dem Bild unten sehen können. Was ich erreichen möchte, ist, dass die Beschriftungen auf meiner X-Achse (die Daten) nur angezeigt werden, wenn ein Datenpunkt auf dem Diagramm ist, also nicht alle Tage, wie es jetzt der Fall ist. Ich habe nicht wirklich viel Erfahrung mit der ganzen Web-Entwicklung, so dass jede Hilfe geschätzt wird. Danke im Voraus.

Mein Code, wie es steht:

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

Ich habe dieses Problem gelöst, indem Sie Zecken Callback-Methode und durch Setzen Autoskip falsche. Ich verwende jedoch keine Zeitskala. Beim Rückruf können Sie Ihr Datum und das gewünschte Format übergeben, es wird das formatierte Datum zurückgegeben.
Unten ist der Screenshot für das gleiche und den funktionierenden Beispielcode.

[Probe-Code]

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