Javascript 在ChartJS散点图中移动零线
我有一张散点图,图中只有一个点。然而,音阶从零开始,这导致零线没有显示在图表中间。我会加入一些图片来说明我在寻找什么 想要的结果: 当前结果: (请忽略两幅图像数据集之间的差异) 这是我目前的代码:Javascript 在ChartJS散点图中移动零线,javascript,chart.js,Javascript,Chart.js,我有一张散点图,图中只有一个点。然而,音阶从零开始,这导致零线没有显示在图表中间。我会加入一些图片来说明我在寻找什么 想要的结果: 当前结果: (请忽略两幅图像数据集之间的差异) 这是我目前的代码: window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myScatter = Chart.
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myScatter = Chart.Scatter(ctx, {
data: {
datasets: [{
backgroundColor: '#000000',
borderColor: '#000000',
data: [{
x: 61.01,
y: 62.87
}]
}]
},
options: {
title: {
display: false,
},
scales: {
xAxes: [{
ticks: {
beginAtZero: false,
max: 100,
min: 0,
stepSize: 20
},
gridLines: {
display: true,
}
}],
yAxes: [{
ticks: {
beginAtZero: false,
max: 100,
min: 0,
stepSize: 20
}
}]
}
},
});
};
我已经查看了,但找不到允许我将零线移动到50的样式设置。我能做到这一点吗?正如Z.Bagley在评论中向我建议的那样,我只需在图表上画两条线就解决了这个问题。这是很容易实现的 添加插件后,我只需将以下代码添加到我的options对象中:
annotation: {
annotations: [
{
drawTime: 'afterDraw',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 50,
borderColor: '#005a99',
borderWidth: 4,
label: {
enabled: false,
}
},
{
drawTime: 'afterDraw',
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-1',
value: 50,
borderColor: '#005a99',
borderWidth: 4,
label: {
enabled: false,
}
}
]
},
产生了想要的结果:
诀窍是禁用轴样式,只需绘制两条单独的线谢谢。添加了我的工作解决方案作为答案