Jak używać dwóch osi Y w Chart.js v2?

Question

Próbuję utworzyć wykres liniowy z dwoma zestawami danych, każdy z własną skalą Y/osią (jeden po lewej, jeden po prawej stronie wykresu) przy użyciu wykresu Chart.js.

To jest mój kod (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 
     } 
    ] 
    } 
}); 

Jednak druga oś nie jest widoczny, a drugi zestaw danych jest nadal skalowany dokładnie jak pierwszy (0 do 100 zamiast od 0 do 1). Co muszę zmienić?

Answer 1

Dla ChartJs 2.x tylko kilka zmiany muszą zostać wprowadzone (wygląda na to, że próbowali połączyć opcje 2.x z opcji multi-osi z mojego talerza?),

• yAxes pole musi znajdować się w obiekcie scales, do którego odwołuje się wartość yAxis, id nie jest nazwą.
• Dla kroków/rozmiarów skali wystarczy zawinąć te opcje w obiekcie ticks.
• Nie potrzeba scalePositionLeft ten jest objęty position

Przykład:

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

fiddle example