Wie verwende ich zwei Y-Achsen in Chart.js v2?

73

Ich versuche, mit Chart.js ein Liniendiagramm mit zwei Datensätzen mit jeweils einer eigenen Y-Skala / Achse (einer links, einer rechts vom Diagramm) zu erstellen.

Dies ist mein Code ( jsfiddle ):

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: [ '1', '2', '3', '4', '5' ],
    datasets: [
      {
        label: 'A',
        yAxesGroup: 'A',
        data: [ 100, 96, 84, 76, 69 ]
      },
      {
        label: 'B',
        yAxesGroup: 'B',
        data: [ 1, 1, 1, 1, 0 ]
      }
    ]
  },
  options: {
    yAxes: [
      {
        name: 'A',
        type: 'linear',
        position: 'left',
        scalePositionLeft: true
      },
      {
        name: 'B',
        type: 'linear',
        position: 'right',
        scalePositionLeft: false,
        min: 0,
        max: 1
      }
    ]
  }
});

Die zweite Achse ist jedoch nicht sichtbar und der zweite Datensatz ist immer noch genau wie der erste skaliert (0 bis 100 anstelle von 0 bis 1). Was muss ich ändern?

nur ich
quelle

Antworten:

170

Für ChartJs 2.x müssen nur ein paar Änderungen vorgenommen werden (anscheinend haben Sie versucht, 2.x-Optionen mit den Mehrachsenoptionen meiner Gabel zu kombinieren?).

  • Das yAxesFeld muss sich in einem scalesObjekt befinden
  • Die yAxis wird mit der ID und nicht mit dem Namen referenziert.
  • Für die Skalierungsschritte / -größe müssen Sie diese Optionen nur in ein ticksObjekt einschließen.
  • scalePositionLeftDies ist nicht erforderlichposition

Beispiel:

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});

Geigenbeispiel

Quitte
quelle
1
Wenn ich Ihre Geige öffne, sind beide Achsen vorhanden, aber der zweite Datensatz ( B) ist immer noch nicht auf die rechte Achse skaliert ( B). Warum nicht?
Just.me
2
Entschuldigung Tippfehler meinerseits sollte yAxisIDnicht seinyAxesID
Quitte
@ Quince Hallo Quitte, aber wie man zwei verschiedene Diagrammtypen (Linie und Balken) mit Ihrem Code anwendet. Vielen Dank im Voraus
Bcktr
1
@Bcktr Ich bin sicher, Sie können den Typ einfach in eine Leiste ändern. (Oder zeigen Sie einen Balken und eine Linie in derselben Grafik?) Im Moment nicht in der Nähe eines Computers, aber ich denke, das sollte funktionieren.
Quitte
1
Wissen Sie, wie Sie Ticks (min / max) automatisch anhand von Daten einstellen? Es funktioniert für die linke Achse, standardmäßig ist die rechte Achse 0-1
funkeln