如何在 Chart.js v2中使用两个 Y 轴？

我试图使用 Chart.js 创建一个包含两个数据集的线性图表，每个数据集都有自己的 Y 比例尺/轴(一个在图表的左边，一个在图表的右边)。

这是我的代码(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
}
]
}
});

但是，第二个轴是不可见的，并且第二个数据集仍然与第一个数据集精确地缩放(0到100而不是0到1)。我需要改变什么？

137983 次浏览
小开
最佳答案

For ChartJs 2.x only a couple changes need to be made (it looks like you have tried to combine 2.x options with the multi-axes options from my fork?),

  • The yAxes field needs to be in a scales object
  • the yAxis is referenced by id not name.
  • For the scale steps/size you just need to wrap these options in a ticks object.
  • No need forscalePositionLeft this is covered by position

Example:

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

小开

This solution is working in react.

// "chart.js": "^2.9.4"
// "react-chartjs-2": "^2.11.1"




const lineChartData = {
data: {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgba(255, 99, 132, 0.2)',
},
{
label: '# of Votes',
data: [19, 9, 2, 1, 1, 21],
fill: false,
backgroundColor: 'rgb(122, 99, 255)',
borderColor: 'rgba(102, 99, 255, 0.2)',
}
],
},
options: {
scales: {
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
},
},
{
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
},
},
],
},
}
}




<Line
data={lineChartData.data}
options={lineChartData.options}
height={30}
width={80}
options=\{\{ maintainAspectRatio: true }}
/>
小开

The accepted answer no longer works as of 3.5, and the cause is listed as part of the breaking changes for 3.X (See 3.x Migration Guide)

The updated code below changes the scales property, from scales: {yScales: [...]} to scales: {[id]: {[options]}} , and also adds fill: true, (Was changed at 3.X from defaulting to true) and tension: 0.4 (The example provided before does have smooth curves, and seems like it was an undocumented "breaking" change)

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

提交答案