当鼠标悬停在相应的图例项目上时，突出显示图表元素项目
问题描述：
当我将鼠标悬停在相应的图例项目上时，我试图让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);
}
*/
}
可有人告诉我，请如何触发基于图例项目上空盘旋setHoverStyle和removeHoverStyle方法ChartsJS 2.5
我已经创建了显示问题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 = {
\t labels: chartAccidentsByRoadConditionsLabels,
\t datasets: [{
\t \t data: chartAccidentsByRoadConditionsData,
\t \t backgroundColor: [ "#82a8c3","#b24339","#053454","#77954b" ],
\t \t hoverBackgroundColor: [ "#7597AF","#A03C33","#042E4B","#6B8643" ]
\t }]
};
$(document).ready(function() {
\t var canvasAccidentsByRoadConditions = document.getElementById("chart-AccidentsByRoadConditions").getContext("2d");
\t var chartAccidentsByRoadConditions = new Chart(canvasAccidentsByRoadConditions, {
\t \t type: 'pie',
\t \t data: dataAccidentsByRoadConditions,
\t \t options: { \t
\t \t \t tooltips: {
\t \t \t \t enabled: false
\t \t \t },
\t \t \t legend: { \t \t \t \t \t \t
\t \t \t \t display:false
\t \t \t },
\t \t \t legendCallback: function(chart) { \t
\t \t \t \t var text = [];
\t \t \t \t text.push('<ul>');
\t \t \t \t for (var i=0; i<chart.data.datasets[0].data.length; i++) {
\t \t \t \t \t text.push('<li>');
\t \t \t \t \t text.push('<div class="legendValue"><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
\t \t \t \t \t text.push(chart.data.datasets[0].data[i] + '</span></div>');
\t \t \t \t \t text.push('<div class="legendLabel">');
\t \t \t \t \t if (chart.data.labels[i]) { text.push('<p class="label">' + chart.data.labels[i] + '</p>'); }
\t \t \t \t \t if (chart.data.datasets[0].data[i]) {
\t \t \t \t \t \t text.push('<p class="percentage">' + chartValueToPercentage(chart.data.datasets[0].data[i],chartAccidentsByRoadConditions.getDatasetMeta(0).total) + '</p>');
\t \t \t \t \t }
\t \t \t \t \t text.push('</li>');
\t \t \t \t }
\t \t \t \t text.push('</ul>');
\t \t \t \t return text.join("");
\t \t \t }
\t \t }
\t });
\t // Create our legend
\t $('#legend-AccidentsByRoadConditions').prepend(chartAccidentsByRoadConditions.generateLegend());
\t // Bind our "Break-Out" Chart function
\t $('#chart-AccidentsByRoadConditions').on('mousemove mouseout',function(e){
\t \t var activeSegment = chartAccidentsByRoadConditions.getElementAtEvent(e);
\t \t pieChartHoverBreakout(this,activeSegment,e);
\t });
\t // Tie the legend to the chart tooltips \t \t \t \t
\t Chart.helpers.each(document.getElementById('legend-AccidentsByRoadConditions').firstChild.childNodes, function(legendNode, index) {
\t \t Chart.helpers.addEvent(legendNode, 'mouseover', function() {
\t \t \t highlightActiveSegment(chartAccidentsByRoadConditions,index,true);
\t \t });
\t \t Chart.helpers.addEvent(legendNode, 'mouseleave', function() {
\t \t \t highlightActiveSegment(chartAccidentsByRoadConditions,index,false);
\t \t });
\t }); \t \t \t \t \t
});
function chartValueToPercentage(value,total) {
\t return Math.floor(((value/total)*100)+0.5) + '%';
}
// Function breakout the active "legend item" PieCharts
currentBreakoutIndex = null;
function pieChartHoverBreakout(oChart, activeSegment, eventType) { \t \t
\t try { \t
\t \t // First, remove any existing classes with "breakout" from the legend
\t \t var legend = ($(oChart).parent('.chartContainer').find('.legend')); \t
\t \t var segmentIndex = (activeSegment.length && (typeof activeSegment[0]._index != 'undefined' && activeSegment[0]._index !== null)) ? activeSegment[0]._index : -1;
\t \t var breakout = (eventType.type === 'mousemove') ? true : false;
\t \t if (currentBreakoutIndex != segmentIndex) {
\t \t \t $.each(legend.find('li'), function(index,value) {
\t \t \t \t $(this).removeClass('breakout');
\t \t \t });
\t \t \t // Second, if we have a valid segment index and breakout is true
\t \t \t // we add the breakout class to the corresponding li in the legend
\t \t \t if (breakout && segmentIndex >= 0) {
\t \t \t \t currentBreakoutIndex = segmentIndex;
\t \t \t \t var targetSegment = legend.find('li').get(segmentIndex);//
\t \t \t \t $(targetSegment).addClass('breakout'); \t \t \t
\t \t \t } else {
\t \t \t \t currentBreakoutIndex = null;
\t \t \t }
\t \t }
\t } catch(e) {
\t \t // Nothing - just prevent errors in console
\t \t console.log(e);
\t }
}
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 {
\t display:block;
\t text-align:left;
\t margin-bottom:0px;
\t margin-left: 20px;
\t margin: 5px 0px 20px 0px;
\t line-height: 1.2;
}
#dashboardWrapper .chart {
float:left;
\t width:50%;
\t vertical-align:middle;
\t display:inline-block;
width:50% !important;
height:100% !important; \t
}
#dashboardWrapper .legend {
\t float:left;
\t width:50%;
\t 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; \t
box-shadow: 0px 0px 5px #888;
}
#dashboardWrapper .legendInfo span {
display: block;
font-size: 12px;
margin-top: 5px; \t
}
#dashboardWrapper .chart
{
\t margin-bottom: 25px; \t
}
#dashboardWrapper .chartContainer { padding: 20px 0px; }
#dashboardWrapper .chartContainer ul {
\t background:none; \t
} \t \t \t \t
#dashboardWrapper .chartContainer li {
\t background:none;
\t margin:0;
\t padding:0;
\t border:none;
\t color: #666666;
\t font-size: 16px;
\t font-family: 'Source Sans Pro', sans-serif;
\t font-weight: 400;
\t list-style-type: none; \t \t \t \t
}
#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 {
\t display:inline-block;
\t margin:0;
\t margin-right:10px;
\t padding:0;
\t vertical-align:middle;
}
#dashboardWrapper p.percentage {
\t display:inline-block;
\t margin:0;
\t padding:0;
\t vertical-align:middle; \t
}
#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;
\t padding: 0px 0px 5px 0px;
border: none;
font-family: 'News Cycle', sans-serif;
font-size: 12px;
\t white-space: nowrap;
\t 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; \t
left:0px;
}
.chartContainer .legend ul li.breakout {
\t 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> \t \t
<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>
答
它看起来像你的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显示工作解决方案。
答
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的图表）为圆环图主动段
我添加了一个完整的例子，按您的请求。谢谢你与我一起看这个。到目前为止，我仍然收到setHoverStyle和removeHoverStyle没有定义错误使用您的更新函数。 – Phil
@Phil感谢您添加完整的示例。我现在得到了这个工作！ – jordanwillis
我会很快检查，还没有机会。我确认后马上标记为正确。 – Phil