在 Chart.js 中,

hoverOffset
选项用于设置当鼠标悬停在数据点上时,该数据点的标签相对于数据点的距离。例:
hoverOffset: 5
表示当鼠标悬停在数据点上时,该数据点的标签相对于数据点向上或向下移动 5 个像素。

这个选项只适用于某些类型的图表,如柱状图和条形图。在其他类型的图表中,这个选项可能没有任何效果。

在柱状图或条形图中,当我们设置

hoverOffset
为 5 像素时,当用户在鼠标悬停在该柱状图或条形图上时,它的标签将相对于柱状图或条形图朝上或朝下移动 5 个像素。 它可以帮助在大型数据集时让图表更清晰地呈现数据点的值。

const data = {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Data',
data: [10, 20, 30, 40],
backgroundColor: ['red', 'green', 'blue', 'yellow'],
hoverOffset: 5  // 设置 hoverOffset 为 5 像素
}]
};
const options = {
// options 配置
};
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});

在上面的代码示例中,我们将

hoverOffset
设置为 5 像素,当鼠标悬停在柱状图上时,标签将会向上或向下偏移 5 个像素。