Charts.js 数据不适合第二个 y 轴
我有一个简单的元素，包含整个数据集。
子集“更改”适用于第二个 Y 轴，但使用下面的代码，“更改”数据集仍然相对于左轴显示。
请指教，文档对此主题不是很清楚。我希望蓝线与右轴相关，使用下面的代码。
let chartElement = $('#mainChart');
const data = chartElement.data('chart-dataset');
const cfg = {
type: 'line',
data: {
datasets: [{
'label': 'Total balance',
data: data.stats,
parsing: {
xAxisKey: 'time',
yAxisKey: 'total',
yAxisID: 'y',
},
backgroundColor: 'rgb(98,250,2)',
borderColor: 'rgb(98,250,2)',
}, {
'label': 'Risk balance',
data: data.stats,
parsing: {
xAxisKey: 'time',
yAxisKey: 'risk',
yAxisID: 'y',
},
backgroundColor: 'rgb(255,191,34)',
borderColor: 'rgb(255,191,34)',
}, {
'label': 'Average risk',
data: data.stats,
parsing: {
xAxisKey: 'time',
yAxisKey: 'avRisk',
yAxisID: 'y',
},
backgroundColor: 'rgb(236,4,4)',
borderColor: 'rgb(236,4,4)',
}, {
'label': 'Change %',
data: data.change,
parsing: {
xAxisKey: 'time',
yAxisKey: 'change',
yAxisID: 'yPercent',
},
backgroundColor: 'rgb(31,116,241)',
borderColor: 'rgb(31,116,241)',
}]
},
options: {
scales: {
y: {
id: 'y',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true,
}
},
yPercent: {
id: 'yPercent',
type: 'linear',
position: 'right',
suggestedMax: 1.0,
suggestedMin: -1.0,
ticks: {
precision: 4,
}
},
}
}
}
const mainChart = new Chart(
chartElement,
cfg
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="mainChart" data-chart-dataset="{"stats":[{"time":"2022-03-27 00:00:05","total":424.97014172,"risk":307.70675152,"avRisk":34.18963905777778},{"time":"2022-03-27 00:30:06","total":424.97666652,"risk":307.70675152,"avRisk":34.18963905777778},{"time":"2022-03-27 01:00:06","total":425.22301931,"risk":307.70675152,"avRisk":34.18963905777778},{"time":"2022-03-27 01:30:06","total":424.91940821,"risk":307.70675151999995,"avRisk":34.189639057777775}],"change":[{"time":"2022-03-27 00:00:05","change":0},{"time":"2022-03-27 00:30:06","change":0.0015353549248324776},{"time":"2022-03-27 01:00:06","change":0.05796854495972885},{"time":"2022-03-27 01:30:06","change":-0.07140043840822045}]}" width="1639" height="819" style="display: block; box-sizing: border-box; height: 819px; width: 1639px;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>I have a simple element, containing whole dataset.
Subset "change" is meant for second Y-Axis but using the code below, the "change" dataset still displays in relation to left axis.
Please advise, documentation is not very clear on this topic. I would expect the blue line to be in relation to the right axis, using below code.
let chartElement = $('#mainChart');
const data = chartElement.data('chart-dataset');
const cfg = {
type: 'line',
data: {
datasets: [{
'label': 'Total balance',
data: data.stats,
parsing: {
xAxisKey: 'time',
yAxisKey: 'total',
yAxisID: 'y',
},
backgroundColor: 'rgb(98,250,2)',
borderColor: 'rgb(98,250,2)',
}, {
'label': 'Risk balance',
data: data.stats,
parsing: {
xAxisKey: 'time',
yAxisKey: 'risk',
yAxisID: 'y',
},
backgroundColor: 'rgb(255,191,34)',
borderColor: 'rgb(255,191,34)',
}, {
'label': 'Average risk',
data: data.stats,
parsing: {
xAxisKey: 'time',
yAxisKey: 'avRisk',
yAxisID: 'y',
},
backgroundColor: 'rgb(236,4,4)',
borderColor: 'rgb(236,4,4)',
}, {
'label': 'Change %',
data: data.change,
parsing: {
xAxisKey: 'time',
yAxisKey: 'change',
yAxisID: 'yPercent',
},
backgroundColor: 'rgb(31,116,241)',
borderColor: 'rgb(31,116,241)',
}]
},
options: {
scales: {
y: {
id: 'y',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true,
}
},
yPercent: {
id: 'yPercent',
type: 'linear',
position: 'right',
suggestedMax: 1.0,
suggestedMin: -1.0,
ticks: {
precision: 4,
}
},
}
}
}
const mainChart = new Chart(
chartElement,
cfg
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="mainChart" data-chart-dataset="{"stats":[{"time":"2022-03-27 00:00:05","total":424.97014172,"risk":307.70675152,"avRisk":34.18963905777778},{"time":"2022-03-27 00:30:06","total":424.97666652,"risk":307.70675152,"avRisk":34.18963905777778},{"time":"2022-03-27 01:00:06","total":425.22301931,"risk":307.70675152,"avRisk":34.18963905777778},{"time":"2022-03-27 01:30:06","total":424.91940821,"risk":307.70675151999995,"avRisk":34.189639057777775}],"change":[{"time":"2022-03-27 00:00:05","change":0},{"time":"2022-03-27 00:30:06","change":0.0015353549248324776},{"time":"2022-03-27 01:00:06","change":0.05796854495972885},{"time":"2022-03-27 01:30:06","change":-0.07140043840822045}]}" width="1639" height="819" style="display: block; box-sizing: border-box; height: 819px; width: 1639px;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
yAxisID 不应该是解析对象的一部分。您需要在数据集的根目录中定义它：
yAxisID is not supposed to be part of the parsing object. You need to define it in the root of the dataset: