Cách sử dụng hai trục Y trong Chart.js v2?

Question

Tôi đang cố tạo biểu đồ dạng đường với hai bộ dữ liệu, mỗi bộ có trục/trục Y của riêng nó (một ở bên trái, một ở bên phải của biểu đồ) bằng cách sử dụng Chart.js.

Đây là mã của tôi (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 
     } 
    ] 
    } 
}); 

Tuy nhiên, trục thứ hai là không nhìn thấy được và các bộ dữ liệu thứ hai vẫn có quy mô chính xác như là người đầu tiên (0 đến 100 thay vì 0-1). Tôi cần thay đổi điều gì?

Answer 1

Đối ChartJs 2.x chỉ có một vài thay đổi cần phải được thực hiện (có vẻ như bạn đã cố gắng để kết hợp tùy chọn 2.x với các tùy chọn đa trục từ ngã ba của tôi?),

• Các yAxes trường cần phải ở một đối tượng scales
• yAxis được tham chiếu bởi id không phải tên.
• Đối với các bước/kích thước quy mô, bạn chỉ cần bao gồm các tùy chọn này trong đối tượng ticks.
• Không cần scalePositionLeft này được bao phủ bởi position

Ví dụ:

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