當鼠標懸停在相應的圖例項目上時，突出顯示圖表元素項目

當我將鼠標懸停在相應的圖例項目上時，我試圖讓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>

來源

2017-03-02 Phil

它看起來像你的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顯示工作解決方案。

來源

2017-03-02 21:57:25 jordanwillis

我添加了一個完整的例子，按您的請求。謝謝你與我一起看這個。到目前爲止，我仍然收到setHoverStyle和removeHoverStyle沒有定義錯誤使用您的更新函數。 – Phil

@Phil感謝您添加完整的示例。我現在得到了這個工作！ – jordanwillis

我會很快檢查，還沒有機會。我確認後馬上標記爲正確。 – Phil

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的圖表）爲圓環圖主動段

來源

2017-11-30 12:21:35

當鼠標懸停在相應的圖例項目上時，突出顯示圖表元素項目

回答

相關問題