我有两个 y 轴,问题出在第二个 y 轴:这些点出现在图中的正确位置,但只有当我将鼠标悬停在 x 轴的前两个点上时,才会出现带有相应数据的工具提示.我已将
showLine
属性设置为 false,因为我希望它是散点图。所以我没有传递 x 轴上所有点的数据。这是数据:
[{x: 7, y: 4},
{x: 18, y: 1}]
const data = {
labels: [] as number[],
datasets: [
{
label: 'Words Per Minute',
data: [] as number[],
fill: true,
backgroundColor: mainColor,
borderColor: mainColor,
borderWidth: 3,
lineTension: 0.4,
yAxisID: 'y',
},
{
label: 'Incorrect Characters',
data: [] as any[],
fill: true,
borderColor: function (context: any) {
const dataPoint = context.dataset.data[context.dataIndex];
if (dataPoint && dataPoint.hasOwnProperty('y') && dataPoint.y === 0) {
return 'transparent';
} else {
return errorColor;
}
},
backgroundColor: function (context: any) {
const dataPoint = context.dataset.data[context.dataIndex];
if (dataPoint && dataPoint.hasOwnProperty('y') && dataPoint.y === 0) {
return 'transparent';
} else {
return errorColor;
}
},
borderWidth: 3,
pointRadius: 4,
pointHoverRadius: 8,
showLine: false,
yAxisID: 'y1',
pointStyle: 'cross'
},
],
};
y轴代码
y1: {
position: 'right',
title: {
display: true,
text: 'Incorrect Characters',
color: subColor,
font: {
size: 16,
family: 'lexend, sans-serif',
},
},
ticks: {
autoSkip: true,
maxTicksLimit: 5,
precision: 0,
font: {
family: 'lexend, sans-serif',
},
color: subColor,
callback: function (value: any, index: number, values: string | any[]) {
if (incorrectChars.length !== 0) {
return value;
} else {
if (index === values.length - 1) return 1;
else if (index === 0) return 0;
else return '';
}
}
},
grid: {
color: "transparent"
},
border: {
color: subColor
}
},