Javascript Chart.js-在图例上悬停时显示工具提示

我最近将我的Chart.js版本从

v2.3

升级到

v2.7.1

，这打破了现有的功能，当用户将鼠标悬停在相应的图例项上时，甜甜圈图表中的指定段将处于活动状态（悬停颜色，显示工具提示）。代码如下所示：

 var " + ClientID + @" = new Chart(" + ClientID + @"CTX, {
    data: { ... },
    options: {
        legend: {
            onHover: function(evt, legendItem) {
                var index = " + ClientID + @".data.labels.indexOf(legendItem.text);
                if (" + ClientID + @".data.datasets[0].data[index] > 0) {
                    var metaData = " + ClientID + @".getDatasetMeta(0);
                    var activeSegment = metaData.data[index];
                    " + ClientID + @".tooltipActive = [activeSegment];
                    " + ClientID + @".active = [activeSegment];
                }                                   
            },
        }
    }
});

---

查看Chart.js文件和文档，看起来

tooltipActive

属性已被完全删除，从而破坏了图例悬停功能。我查看了上的发行说明和PRs，但找不到这是一个突破性的变化，或任何提及它的地方。我必须升级Chart.js的版本，以便进行单独的更改，因此无法恢复到

v2.3

。还有其他人遇到过这种情况吗？

这里有一个基于您的方法的解决方案，它适用于当前版本的Chart.js（2.9.3）

除了

onHover

，还必须定义一个

onLeave

回调函数。这确保在鼠标指针离开图例标签时隐藏工具提示并恢复悬停效果

const chart=新图表（“图表”{
键入：“甜甜圈”，
数据：{
标签：[‘一’、‘二’、‘三’]，
数据集：[{
数据：[4,5,3]，
背景颜色：['rgba（255,99,132,0.2）''rgba（255,159,64,0.2）''rgba（54162235,0.2）'，
边框颜色：['rgb（255,99132）''rgb（255,159,64）''rgb（54162235）'，
hoverBackgroundColor:['rgba（255,99132,0.4）''rgba（255,159,64,0.4）''rgba（54162235,0.4）'，
边框宽度：1，
悬停边界宽度：3
}]
},
选项：{
图例：{
onHover：（evt，legendItem）=>{
const index=chart.data.labels.indexOf（legendItem.text）；
constActiveSegment=chart.getDatasetMeta（0）.data[index]；
activeSegment.\u model.backgroundColor=activeSegment.\u options.hoverBackgroundColor；
activeSegment.\u model.borderWidth=activeSegment.\u options.hoverBorderWidth；
图表。工具提示。_active=[activeSegment]；
chart.tooltip.update（）；
chart.draw（）；
},
onLeave：（evt，legendItem）=>{
const index=chart.data.labels.indexOf（legendItem.text）；
constActiveSegment=chart.getDatasetMeta（0）.data[index]；
activeSegment.\u model.backgroundColor=activeSegment.\u options.backgroundColor；
activeSegment.\u model.borderWidth=activeSegment.\u options.borderWidth；
图表。工具提示。_active=[]；
chart.tooltip.update（）；
chart.draw（）；
}
}
}
});

这里有一个基于的解决方案，它适用于当前版本的Chart.js（2.9.3）


const chart=新图表（“图表”{
键入：“甜甜圈”，
数据：{
标签：[‘一’、‘二’、‘三’]，
数据集：[{
数据：[4,5,3]，
背景颜色：['rgba（255,99,132,0.2）''rgba（255,159,64,0.2）''rgba（54162235,0.2）'，
边框颜色：['rgb（255,99132）''rgb（255,159,64）''rgb（54162235）'，
hoverBackgroundColor:['rgba（255,99132,0.4）''rgba（255,159,64,0.4）''rgba（54162235,0.4）'，
边框宽度：1，
悬停边界宽度：3
}]
},
选项：{
图例：{
onHover：（evt，legendItem）=>{
const index=chart.data.labels.indexOf（legendItem.text）；
const rect=chart.canvas.getBoundingClientRect（）；
常量点=图表。getDatasetMeta（0）。数据[索引]。getCenterPoint（）；
常数e=新的MouseEvent（'mousemove'{
clientX:rect.left+point.x，
客户：rect.top+point.y
});
图表.画布.调度事件（e）；
}
}
}
});
您是否尝试过v2.5.0？你也可以看看