你能在chart.js的工具提示中为元素添加一个动作吗

Question

我有一个用chart.js绘制的折线图，显示了一些数据。我已经在工具提示中添加了一个删除元素，但我不知道是否可以添加交互，因此当我在工具提示内单击删除元素时，会运行一些自定义代码，从数据库中删除数据。

const weight_graphOptions = {
title: {
text: 'Weight',
display: true
},
scales: {
x: {
type: 'time',
time: {
// Luxon format string
tooltipFormat: 'dd-MM-yyyy'
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'kg'
}
}
},
plugins: {
tooltip: {
events: ['click'],
callbacks: {
afterFooter:
function (addDeleteButton) {
return 'Delete'
}
}
}
}
}

有人知道我是否可以在不构建自己定制的工具提示的情况下做到这一点吗？

Answer 1

不，默认提供的工具提示不可能做到这一点，首先它不会停留，所以当你试图悬停工具提示时，它就不在了它不起作用的第二个原因是chart.js没有任何事件侦听器来侦听工具提示或工具提示的特定部分上的单击/悬停。

因此，您需要制作一个自定义的外部html工具提示，即使您不再将数据点悬停在可以添加普通按钮的位置，该工具提示也会保持不变