[英]How to trigger tooltip on legend hover?
I'm using ChartJs library in my project and i was trying to show the tooltip of a pie chart both on slice hover or on legend hover, by default the library shows only tooltip on slice hover,我在我的项目中使用ChartJs库,我试图在切片悬停或图例悬停时显示饼图的工具提示,默认情况下,库仅在切片悬停时显示工具提示,
i was trying to do the following onHover function我正在尝试执行以下 onHover 功能
onHover: function (event, legendItem) {
var index = legendItem.datasetIndex;
var label = this.chart.data.datasets[index].label
return label;
}
But the following function still had no effects..但是以下功能仍然没有效果..
The whole code of the chart config is the following:图表配置的全部代码如下:
optionsPagamenti = {
maintainAspectRatio: false,
legend: {
display: true,
position: "right",
labels: {
usePointStyle: true,
boxWidth: 6
},
onHover: function (event, legendItem) {
var index = legendItem.datasetIndex;
var label = this.chart.data.datasets[index].label
return label;
}
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
intersect: 1,
displayColors: false,
callbacks: {
title: function (tooltipItem, data) {
return data['labels'][tooltipItem[0]['index']];
},
label: function (tooltipItem, data) {
return "€" + data['datasets'][0]['data'][tooltipItem['index']].toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
}
}
},
responsive: true,
};
So how could i show the tooltip on legend hover?那么如何在图例悬停时显示工具提示?
Solved with the following method:用以下方法解决:
onHover: function (event, legendItem) {
var chart = this.chart;
var index = legendItem.index;
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment]
chart.tooltip.update()
chart.draw()
}
And i've also added a onLeave method to toggle off the tooltip我还添加了一个 onLeave 方法来关闭工具提示
onLeave: function (event, legendItem) {
var chart = this.chart;
var index = legendItem.index;
chart.tooltip._active = []
chart.tooltip.update()
chart.draw()
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.