Griff X-Achse Etikettenposition in Diagramm js

Question

Bitte schauen Sie in diesem fiddle

Wenn Sie das Ausgabefenster die Größe werden Sie feststellen, dass die Etiketten der x-Achse geneigt wird. was für mich in Ordnung ist. Aber wenn Sie bemerken, dass die Endposition des Etiketts die Mitte des Balkens ist. Ich möchte, dass die Endposition des Etiketts das rechte Ende des Balkens ist. Wie kann dies erreicht werden?

Meine config

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"], 
     datasets: [{ 
      data: [6, 87, 56, 15, 88, 60, 12], 
     }] 
    }, 
    options: { 
     legend: { 
      "display": false 
     }, 
     tooltips: { 
      "enabled": false 
     }, 
     scales: { 
      yAxes: [{ 
       display: false, 
       gridLines: { 
        display : false 
       }, 
       ticks: { 
        display: false, 
        beginAtZero:true 
       } 
      }], 
      xAxes: [{ 
       gridLines: { 
        display : false 
       }, 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

Answer 1

Es ist sicherlich möglich, ein ‚richtiges‘ ausgerichtete Skala tick Label anstelle des ursprünglichen ‚Zentrums‘ ausgerichtete Skala tick Etikett zu erreichen, aber leider ist es nicht sehr einfach zu implementieren . Lass mich dich durchgehen, wie es geht, und dann ein Beispiel geben.

1) Erstens, da es keine Konfigurationsoption gibt, um dies zu steuern, müssen wir uns um eine Art benutzerdefinierte Implementierung kümmern. Es stellt sich heraus, dass die Skalenstrichbeschriftungen in einem Balkendiagramm als Teil der Zeichenmethode Category gerendert werden. Daher müssen wir diese draw Methode irgendwie überschreiben, um zu einer neuen Ausrichtung zu wechseln.

2) Nach dem API gibt es eine dokumentierte Möglichkeit, neue Waagentypen zu erstellen, also sollten wir die Category Tonleiter zu verlängern, um einen ähnlichen Ansatz nutzen zu können und überschreiben draw Methode ist.

Da alle Skalen in ScaleService eingeschlossen sind, müssen wir den folgenden Ansatz verwenden, um einen vorhandenen Skalentyp zu erweitern.

var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({}); 

3) Nun ist es nur eine Frage der herauszufinden, welchen Teil der draw Methode, die wir ändern müssen. Nach dem Durchsehen sieht es so aus, als müssten wir die Logik für die Berechnung von labelX (die Pixelposition zum Rendern des Tick-Labels) ändern. Hier wäre die neue Logik.

// current logic for getting pixel value of each label (we will use the logic below to 
// adjust if necessary) 
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset; 

// get a reference to the bar chart controller so we can determine the chart's bar width 
var meta = me.chart.getDatasetMeta(0); 

// use the bart chart controller to calculate the bar width 
var barWidth = meta.controller.calculateBarWidth(meta.controller.getRuler()); 

// if the labels are rotated, then move the pixel location from the middle of the bar 
// to the far right of the bar 
if (labelRotationRadians != 0) { 
    labelX += barWidth/2; 
} 

4) Jetzt müssen wir unseren neuen Maßstab nur registrieren und das Diagramm zu konfigurieren, es zu benutzen (anstelle der Balkendiagramm Standardkategorie Skala).

zu diesem jsfiddle Beispiel finden sie in Aktion zu sehen und zu sehen, wie alles zusammen passt.