我有一个数据集的值没有显示在双 y 轴图表中。
我有使用双数据集和双 yAxes 的通用 Chart.js 代码。然而,一组数据没有在图表上正确显示。 “温度”值介于 66 和 78 之间,但尽管我使用了最小/最大范围值,但似乎“超出了图表”。
<div style="width:75%">
<canvas class=".content" id="myChart" ></canvas>
</div>
<Script>
var canvas = document.getElementById('myChart').getContext('2d');
// @ts-ignore
var myChart = new Chart(canvas, {
options: {
scales: {
yAxes: [
{
id: 'SG',
//type: 'linear',
position: 'left',
ticks:
{
min: 1,
max: 1.1
}
},
{
id: 'Temp',
//type: 'linear',
position: 'right',
ticks:
{
min: 32,
max: 100
}
}
]
}
},
type: 'bar', //not really needed, over-ridden below
data: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'],
datasets: [{
label: 'Gravity',
yAxesID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
//type: 'line',
label: 'Temp F',
yAxesID: 'Temp',
data: [78, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
}
});
</Script>
也许我遗漏了一些特定于双 y 轴图表的东西......
最佳答案
将 yAxesID
替换为 yAxisID
存在拼写错误,数据集填充应类似于以下代码,或者您可以查看 fiddle 以供引用 -> https://jsfiddle.net/69p7Lsth/1/
datasets: [{
label: 'Gravity',
yAxisID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
label: 'Temp F',
yAxisID: 'Temp',
data: [8, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
关于javascript - 第二个 yAxes 值未使用 Chart.js 正确绘制图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55386420/