Chartjs 273中固定饼图的工具提示
要固定饼图的工具提示,您需要使用Chart.js的事件处理程序。具体来说,您需要使用“onHover”事件来捕获鼠标悬停在饼图上的事件,并使用“update”方法来更新工具提示的内容。
以下是一个简单的示例代码,展示如何固定饼图的工具提示:
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
enabled: false
},
onHover: function(event, chartElement) {
if (chartElement && chartElement.length) {
var tooltip = chartElement[0]._chart.tooltip;
tooltip.update();
tooltip.pivot();
tooltip.transition( {
y: chartElement[0]._model.y,
x: chartElement[0]._model.x
});
}
}
}
});
在这个例子中,我们首先禁用了默认的工具提示。然后,我们使用“onHover”事件处理程序来捕获鼠标悬停在饼图上的事件。如果有一个图表元素被悬停,我们会获取工具提示对象,并使用“update”方法来更新内容。然后,我们使用“pivot”方法来调整工具提示的位置,使其固定在饼图上。最后,我们使用“transition”方法来动态地将工具提示移动到鼠标悬停的图表元素上。
请注意,这个例子假设您已经定义了一个“ctx”变量,它是指向饼图的canvas元素的上下文。您还需要根据您的具体情况修改“data”变量来适应您的数据。
原文地址: https://www.cveoy.top/t/topic/MWu 著作权归作者所有。请勿转载和采集!