web-dev-qa-db-fra.com

Comment utiliser deux axes Y dans Chart.js v2?

J'essaie de créer un graphique en courbes avec deux jeux de données, chacun avec sa propre échelle/axe Y (un à gauche, un à droite du graphique) à l'aide de Chart.js.

Ceci est mon 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
      }
    ]
  }
});

Cependant, le deuxième axe n'est pas visible et le deuxième jeu de données est toujours mis à l'échelle exactement comme le premier (0 à 100 au lieu de 0 à 1). Que dois-je changer?

javascriptbrowsergraphchart.js
45
just.me

Pour ChartJs 2.x, seuls quelques changements doivent être apportés (il semble que vous ayez essayé de combiner les options 2.x avec les options multi-axes de ma fourche?),

  • Le champ yAxes doit être dans un objet scales
  • le yAxis est référencé par id pas nom.
  • Pour les échelons/la taille, il vous suffit d’envelopper ces options dans un objet ticks.
  • Pas besoin de scalePositionLeft cela est couvert par position

Exemple:

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

exemple de violon

116
Quince