Javascript 将鼠标悬停在对应的图例项上时高亮显示图表元素

当我将鼠标悬停在相应的图例项上时，我试图使Charts.js（版本2.5）中的饼图高亮显示相应的部分

我有以下代码绑定到mouseover/mouseout事件并调用我的函数，但我不知道如何突出显示适当的片段

// Function to bind mouseover/mouseout events
Chart.helpers.each(document.getElementById('legendID').firstChild.childNodes, function(legendNode, index) {
    Chart.helpers.addEvent(legendNode, 'mouseover', function() {
        highlightActiveSegment(myChart,index,true);
    });
    Chart.helpers.addEvent(legendNode, 'mouseleave', function() {
        highlightActiveSegment(myChart,index,false);
    });
});


// And the corresponding function highlightActiveSegment
function highlightActiveSegment(oChart,segmentIndex,highlight) {
    var activeSegment = oChart.data.datasets[0]._meta[1].controller._data[segmentIndex];
    window.chartAccidentsByRoadConditions.data.datasets[0]._meta[1].controller.setHoverStyle(activeSegment);
    /*
    if (highlight) {
        oChart.data.datasets[0].controller.setHoverStyle(segmentIndex);
    } else {
        oChart.data.datasets[0].controller.removeHoverStyle(segmentIndex);
    }
    */
}

有人能告诉我如何根据ChartsJS 2.5中悬停的图例项触发setHoverStyle和removeHoverStyle方法吗

我已经创建了一个显示问题的示例。如示例中所示，由于未定义showHoverStyle和removeHoverStyle，将鼠标悬停在图例项上时，控制台中会出现错误。目前在线的ChartJS文档似乎不是最新的

完整示例

var chartAccidentsByRoadConditionsClasses=new Array（）；
chartAccidentsByRoadConditionsClasses[0]=“干燥”；
chartAccidentsByRoadConditionsClasses[1]=“不可用”；
ChartAccidentsByroadConditionsClass[2]=“湿”；
ChartAccidentsByroadConditionsClass[3]=“结冰”；
var chartAccidentsByRoadConditionsLabels=新数组（）；
chartAccidentsByRoadConditionsLabels[0]=“干燥”；
chartAccidentsByRoadConditionsLabels[1]=“不可用”；
chartAccidentsByRoadConditionsLabels[2]=“湿”；
chartAccidentsByRoadConditionsLabels[3]=“结冰”；
var chartAccidentsByRoadConditionsData=新数组（）；
chartAccidentsByRoadConditionsData[0]=31；
chartAccidentsByRoadConditionsData[1]=3；
chartAccidentsByRoadConditionsData[2]=3；
chartAccidentsByRoadConditionsData[3]=1；
var dataAccidentsByRoadConditions={
标签：ChartAccidentsByroadConditionsSlabel，
数据集：[{
数据：chartAccidentsByRoadConditionsData，
背景颜色：[“82a8c3”、“b24339”、“053454”、“77954b”]，
hoverBackgroundColor:[“7597AF”、“A03C33”、“042E4B”、“6B8643”]
}]
};
$（文档）.ready（函数（）{
var CanvaAccidentsByroadConditions=document.getElementById（“图表意外事件ByroadConditions”）.getContext（“2d”）；
var chartAccidentsByRoadConditions=新图表（canvasAccidentsByRoadConditions{
键入“pie”，
数据：dataAccidentsByRoadConditions，
选项：{
工具提示：{
已启用：false
},
图例：{
显示：假
},
legendCallback:函数（图表）{
var text=[]；
text.push（“
”）；
对于（变量i=0；i=0）{
currentBreakoutIndex=分段索引；
var targetSegment=legend.find（'li'）.get（segmentIndex）//
$（targetSegment）.addClass（'breakout'）；
}否则{
currentBreakoutIndex=null；
}
}
}捕获（e）{
//无-只需防止控制台中出现错误
控制台日志（e）；
}
}
功能highlightActiveSegment（oChart、segmentIndex、highlight）{
var activeSegment=oChart.data.datasets[0]。_meta[0]。controller._data[segmentIndex]；
如果（突出显示）{
oChart.data.datasets[0].controller.setHoverStyle（activeSegment）；
}否则{
oChart.data.datasets[0].controller.removeHoverStyle（activeSegment）；
}
}

#仪表板包装器h2{
显示：块；
文本对齐：左对齐；
边缘底部：0px；
左边距：20px；
利润率：5px 0px 20px 0px；
线高：1.2；
}
#仪表板包装器。图表{
浮动：左；
宽度：50%；
垂直对齐：中间对齐；
显示：内联块；
宽度：50%！重要；
身高：100%！重要；
}
#仪表板包装。图例{
浮动：左；
宽度：50%；
边缘底部：25px；
}
#dashboardWrapper.legendInfo{
背景色：#ebebebeb；
显示：内联块；
填充：0px 10px 5px 10px；
边界半径：10px；
-webkit边界半径：10px；
-moz边界半径：10px；
盒影：0px 0px 5px#888；
}
#dashboardWrapper.legendInfo span{
显示：块；
字体大小：12px；
边缘顶部：5px；
}
#仪表板包装器。图表
{
边缘底部：25px；
}
#dashboardWrapper.chartContainer{padding:20px 0px；}
#仪表板包装器。chartContainer ul{
背景：无；
}				
#仪表板包装器{
背景：无；
保证金：0；
填充：0；
边界：无；
颜色：#666666；
字体大小：16px；
字体系列：“源Sans-Pro”，无衬线；
字体大小：400；
列表样式类型：无；
}
#dashboardWrapper.chartContainer li span{
背景色：#791b15；
高度：20px；
最小宽度：20px；
填充物：2个3个；
显示：内联块；
垂直对齐：中间对齐；
边界半径：5px；
右边距：10px；
颜色：#FFF；
文本对齐：居中；
字体大小：12px；
线高：18px；
文本阴影：1px 1px 2px#000；
}
#dashboardWrapper div.legendValue{float:left；width:20%；}
#dashboardWrapper div.legendLabel{float:左；宽度：80%；}
#仪表板包装p.标签{
显示：内联块；
保证金：0；
右边距：10px；
填充：0；
垂直对齐：中间对齐；
}
#仪表板包装件p.百分比{
显示：内联块；
保证金：0；
填充：0；
垂直对齐：中间对齐；
}
#dashboardWrapper.dashboardElement
{
显示：内联块；
最小高度：350px；
浮动：左；
填充：0px 20px 0px 2%；
边际：0px；
-webkit转换原点：0；
-moz变换原点：0；
-o变换原点：0；
-ms变换原点：0；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
#仪表板包装器
{
背景：无；
保证金：0；
填充：0px 0px 5px 0px；
边界：无；
字体系列：“新闻周期”，无衬线；
字体大小：12px；
空白：nowrap；
光标：指针；
浮动：对；
显示：内联；
宽度：94%；
}
.chartContainer.legend ul li{
位置：相对位置；
-webkit转换原点：0；
-moz变换原点：0；
-o变换原点：0；
-ms变换原点：0；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
左：0px；
}
.chartContainer.legend ul li.breakout{
左：-10px；
}

按路况划分的交通意外
Chart.helpers.each(document.getElementById('legend-AccidentsByRoadConditions').firstChild.childNodes, function(legendNode, index) {
  Chart.helpers.addEvent(legendNode, 'mousemove', function() {
    highlightActiveSegment(chartAccidentsByRoadConditions, index, true);
  });
  Chart.helpers.addEvent(legendNode, 'mouseleave', function() {
    highlightActiveSegment(chartAccidentsByRoadConditions, index, false);
  });    
});

function highlightActiveSegment(oChart,segmentIndex,highlight) {
  var activeSegment = oChart.data.datasets[0]._meta[0].data[segmentIndex];
  oChart.updateHoverStyle([activeSegment], null, highlight);
  oChart.render();
}

color: [
  {
    backgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
    borderColor: 'rgba(255, 255, 255, 0)',
    hoverBackgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
    hoverBorderColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
    hoverBorderWidth: 10,
    hoverRadius: 0