Chartjs: Ausrichten des ersten Ticks im ersten Index der Achse

Question

Ich versuche, die Verwendung in Diagramm Zeitskala mit einem Datumsbereich zu zeigen. Aber manchmal sind die Daten umfangreich (350+). In diesen Fällen ist der Anfang der Y-Achsen-Gitterlinien nicht mit dem ersten Teilstrich der X-Achse ausgerichtet. Ich habe nach einer Lösung gesucht, aber die Leute sagen, dass sie das schon gelöst haben. Warum kommt das immer noch bei mir vor? Ich benutze die neueste chartjs Version (2.6) und den Code ähnlich wie folgt.

var config= { 
     type: 'line', 
     data: { 
      datasets: [{ 
       label: 'CPU', 
       fill: true, 
       pointHitRadius: 25, 
       backgroundColor: "rgba(75,192,192,1)", 
       borderColor: 'rgba(75,192,192,1)', 
       pointBorderColor: 'rgba(75,192,192,1)', 
       pointBackgroundColor: '#fff', 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scaleBeginAtZero: false, 
      title: { 
       display: true, 
       text: 'Uso de CPU' 
      }, 
      hover: {animationDuration: 100}, 
      layout:{ 
       padding: {left: 50, right: 50, top: 50, bottom: 50 } 
      }, 
      legend:{display: false }, 
      animation: {duration: 500 }, 
      scales: { 
       xAxes: [{ 
        type: 'time', 
        ticks: { 
         maxRotation: 0, 
         autoSkip: true, 
         maxTicksLimit: 12, 
         bounds: "data", 
        }, 
        time: { 
         round: 'minutes', 
         displayFormats: { 
          'millisecond': 'HH:mm', 
          'second': 'HH:mm', 
          'minute': 'HH:mm', 
          'hour': 'HH:mm', 
          'day': 'DD [de] MMM [de] YY', 
          'week': 'DD [de] MMM [de] YY', 
          'month': 'DD [de] MMM [de] YY', 
          'quarter': 'DD [de] MMM [de] YY', 
          'year': 'DD [de] MMM [de] YY', 
         }, 
         tooltipFormat: 'D MMM YYYY H:mm' 
        } 
       }], 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true, 
         stepSize: 25, 
         suggestedMin: 0, 
         suggestedMax: 100, 
         callback: function(value, index, values) { 
          return value+"% "; 
         } 
        } 
       }] 
      } 
     } 
    }; 
    var rows = {"rows":[{"x":"2017-08-25T10:16:54-03:00","y":21}]}; //continues 350+ 
    var canvas = $('<canvas>', {id: element}); 
    var ctx = canvas[0].getContext('2d'); 
    window.myChart = new Chart(ctx, config); 
    window.myChart.data.datasets[0].data = rows; 
    window.myChart.update(); 

Jede Hilfe wird unterstützt.

Answer 1

Ich recherchierte und fand keine Antworten. Ich ging zurück zu the documentation und überprüfte alle verfügbaren Optionen. Ich habe das mit den Optionen gelöst: scales.xAxes.distribution: 'series' (kann linear sein), scales.xAxes.source: 'auto' und scales.bounds: 'ticks'