将鼠标悬停在相应的图例项上时突出显示图表元素答案

【问题标题】：Highlight chart element when hovering over its corresponding legend Item将鼠标悬停在相应的图例项上时突出显示图表元素
【发布时间】：2017-03-02 20:44:39
【问题描述】：

当我将鼠标悬停在相应的图例项上时，我试图使 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 方法

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

完整示例

var chartAccidentsByRoadConditionsClasses =  new Array();
chartAccidentsByRoadConditionsClasses[0] = "Dry";
chartAccidentsByRoadConditionsClasses[1] = "Not Available";
chartAccidentsByRoadConditionsClasses[2] = "Wet";
chartAccidentsByRoadConditionsClasses[3] = "Icy";
var chartAccidentsByRoadConditionsLabels =  new Array();
chartAccidentsByRoadConditionsLabels[0] = "Dry";
chartAccidentsByRoadConditionsLabels[1] = "Not Available";
chartAccidentsByRoadConditionsLabels[2] = "Wet";
chartAccidentsByRoadConditionsLabels[3] = "Icy";
var chartAccidentsByRoadConditionsData =  new Array();
chartAccidentsByRoadConditionsData[0] = 31;
chartAccidentsByRoadConditionsData[1] = 3;
chartAccidentsByRoadConditionsData[2] = 3;
chartAccidentsByRoadConditionsData[3] = 1;

var dataAccidentsByRoadConditions = {
	labels: chartAccidentsByRoadConditionsLabels,
	datasets: [{
		data: chartAccidentsByRoadConditionsData,
		backgroundColor: [ "#82a8c3","#b24339","#053454","#77954b" ],
		hoverBackgroundColor: [ "#7597AF","#A03C33","#042E4B","#6B8643" ]
	}]
};

$(document).ready(function() {
	var canvasAccidentsByRoadConditions = document.getElementById("chart-AccidentsByRoadConditions").getContext("2d");
	var chartAccidentsByRoadConditions = new Chart(canvasAccidentsByRoadConditions, {
		type: 'pie',
		data: dataAccidentsByRoadConditions,
		options: {	
			tooltips: {
				enabled: false
			},
			legend: {						
				display:false
			},
			legendCallback: function(chart) {	
				var text = [];
				text.push('<ul>');
				for (var i=0; i<chart.data.datasets[0].data.length; i++) {
					text.push('<li>');
					text.push('<div class="legendValue"><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
					text.push(chart.data.datasets[0].data[i] + '</span></div>');
					text.push('<div class="legendLabel">');
					if (chart.data.labels[i]) { text.push('<p class="label">' + chart.data.labels[i] + '</p>'); }
					if (chart.data.datasets[0].data[i]) { 
						text.push('<p class="percentage">' + chartValueToPercentage(chart.data.datasets[0].data[i],chartAccidentsByRoadConditions.getDatasetMeta(0).total) + '</p>'); 
					}
					text.push('</li>');
				}
				text.push('</ul>');
				return text.join("");
			}
		}
	});

	// Create our legend
	$('#legend-AccidentsByRoadConditions').prepend(chartAccidentsByRoadConditions.generateLegend());

	// Bind our "Break-Out" Chart function
	$('#chart-AccidentsByRoadConditions').on('mousemove mouseout',function(e){
		var activeSegment = chartAccidentsByRoadConditions.getElementAtEvent(e);
		pieChartHoverBreakout(this,activeSegment,e);
	});

	// Tie the legend to the chart tooltips				
	Chart.helpers.each(document.getElementById('legend-AccidentsByRoadConditions').firstChild.childNodes, function(legendNode, index) {
		Chart.helpers.addEvent(legendNode, 'mouseover', function() {
			highlightActiveSegment(chartAccidentsByRoadConditions,index,true);
		});
		Chart.helpers.addEvent(legendNode, 'mouseleave', function() {
			highlightActiveSegment(chartAccidentsByRoadConditions,index,false);
		});
	});					
});

function chartValueToPercentage(value,total) {
	return Math.floor(((value/total)*100)+0.5) + '%';
}

// Function breakout the active "legend item" PieCharts
currentBreakoutIndex = null;
function pieChartHoverBreakout(oChart, activeSegment, eventType) {		
	try {	
		// First, remove any existing classes with "breakout" from the legend
		var legend = ($(oChart).parent('.chartContainer').find('.legend'));	
		var segmentIndex = (activeSegment.length && (typeof activeSegment[0]._index != 'undefined' && activeSegment[0]._index !== null)) ? activeSegment[0]._index : -1;
		var breakout = (eventType.type === 'mousemove') ? true : false;
		if (currentBreakoutIndex != segmentIndex) {
			$.each(legend.find('li'), function(index,value) {
				$(this).removeClass('breakout');
			});
			// Second, if we have a valid segment index and breakout is true
			// we add the breakout class to the corresponding li in the legend
			if (breakout && segmentIndex >= 0) {
				currentBreakoutIndex = segmentIndex;
				var targetSegment = legend.find('li').get(segmentIndex);//
				$(targetSegment).addClass('breakout');			
			} else {
				currentBreakoutIndex = null;
			}
		}
	} catch(e) {
		// Nothing - just prevent errors in console
		console.log(e);
	}
}

function highlightActiveSegment(oChart,segmentIndex,highlight) {
  var activeSegment = oChart.data.datasets[0]._meta[0].controller._data[segmentIndex];

  if (highlight) {
    oChart.data.datasets[0].controller.setHoverStyle(activeSegment);
  } else {
    oChart.data.datasets[0].controller.removeHoverStyle(activeSegment);
  }
}

#dashboardWrapper h2 { 
	display:block; 
	text-align:left; 
	margin-bottom:0px; 
	margin-left: 20px; 
	margin: 5px 0px 20px 0px; 
	line-height: 1.2;
}
#dashboardWrapper .chart {
  float:left;
	width:50%;
	vertical-align:middle;
	display:inline-block;
  width:50% !important;
  height:100% !important;	
}
#dashboardWrapper .legend {
	float:left;
	width:50%;
	margin-bottom: 25px;
}
#dashboardWrapper .legendInfo {
  background-color: #EBEBEB;
  display: inline-block;
  padding: 0px 10px 5px 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;	
  box-shadow: 0px 0px 5px #888;
}
#dashboardWrapper .legendInfo span {
  display: block;
  font-size: 12px;    
  margin-top: 5px;	
}
#dashboardWrapper .chart
{
	margin-bottom: 25px;	
}
#dashboardWrapper .chartContainer { padding: 20px 0px; }
#dashboardWrapper .chartContainer ul {
	background:none;	
}				
#dashboardWrapper .chartContainer li {
	background:none;
	margin:0;
	padding:0;
	border:none;
	color: #666666;
	font-size: 16px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	list-style-type: none;				
}
#dashboardWrapper .chartContainer li span {
  background-color: #791b15;
  height: 20px;
  min-width: 20px;
  padding: 2px 3px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 5px;
  margin-right: 10px;
  color:#FFF;
  text-align:center;
  font-size: 12px;
  line-height: 18px;
  text-shadow: 1px 1px 2px #000;
}
#dashboardWrapper div.legendValue { float:left; width:20%; }
#dashboardWrapper div.legendLabel { float:left; width:80%; }
#dashboardWrapper p.label {
	display:inline-block;
	margin:0;
	margin-right:10px;
	padding:0;
	vertical-align:middle;
}
#dashboardWrapper p.percentage {
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align:middle;	
}
#dashboardWrapper .dashboardElement
{
  display:inline-block; 
  min-height: 350px;
  float: left; 
  padding: 0px 20px 0px 2%;
  margin: 0px;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#dashboardWrapper .chartContainer li 
{
    background: none;
    margin: 0 0 0 0;
  	padding:  0px 0px 5px 0px;
    border: none;
    font-family: 'News Cycle', sans-serif;
    font-size: 12px;
	  white-space: nowrap;    
	  cursor:pointer;
    float: right;
    display: inline;
    width: 94%;  
}

.chartContainer .legend ul li { 
  position:relative; 
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;	
  left:0px;
}
.chartContainer .legend ul li.breakout { 
	left:-10px; 
}

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.5.0/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboardWrapper">
  <div class="dashboardElement right">
      <h2>Accidents by Road Conditions</h2>		
      <div class="chartContainer" style="position:relative;">
        <canvas id="chart-AccidentsByRoadConditions" class="chart" width="200" height="150"></canvas>
        <div id="legend-AccidentsByRoadConditions" class="legend"></div>            
      </div>                                                           
  </div>
</div>

【问题讨论】：

标签： javascript jquery chart.js

【解决方案1】：

看起来您的highlightActiveSegment 函数和图例事件处理程序只是存在一些问题。这是一个带有解释的更正版本。

修改的图例事件处理程序

您需要使用mousemove 而不是mouseover，以便在用户移动鼠标时该部分保持突出显示。

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);
  });    
});

修改highlightActiveSegment函数

基本上，关键是确保您获得由鼠标悬停的图例项所代表的实际图形段，相应地设置悬停样式并重新渲染图表。

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

另外，这里有一个codepen 显示了有效的解决方案。

【讨论】：

我已根据您的要求添加了一个完整的示例。谢谢你和我一起研究这个。到目前为止，我仍然收到 setHoverStyle 和 removeHoverStyle is not defined 错误使用您更新的功能。
@Phil 感谢您添加完整的示例。我现在开始工作了！
我很快就会检查这个，还没有机会。我一确认就会标记为正确。

【解决方案2】：

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

} ],

鼠标悬停在圆环图的角度 2（ng-2 图表）中突出显示活动段

【讨论】：