如何在Chart.js v2中使用两个Y轴？
如何在Chart.js v2中使用两个Y轴？
提问于 2016-06-29 04:06:33
我正在尝试使用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)。我需要改变什么？
回答 2
Stack Overflow用户
发布于 2021-07-30 11:11:49
从3.5开始，被接受的答案不再有效，原因被列为3.X的破坏性更改的一部分(请参阅3.x Migration Guide)
下面更新的代码将scales属性从scales: {yScales: [...]}更改为scales: {[id]: {[options]}}，还添加了fill: true, (在3.X中从默认更改为true)和tension: 0.4 (前面提供的示例确实具有平滑的曲线，看起来像是一个未记录的“突破性”更改)
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
}
}
}
}
});Stack Overflow用户
发布于 2021-06-08 14:25:49
此解决方案在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 }}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38085352
复制相关文章
相似问题