0
対応する凡例項目にカーソルを合わせると、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);
}
*/
}
誰かがPLEASE方法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 = {
\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>
ドーナツグラフの角度2（NG-2図）でアクティブなセグメント。私と一緒にこれを調べてくれてありがとう。これまでのところ、私はまだsetHoverStyleを受け取り、removeHoverStyleは更新された関数を使ってエラーを定義していません。 – Phil
@ Philあなたの完全な例を追加していただきありがとうございます。私はこれで今働いている！ – jordanwillis
私はまもなくこれをチェックします、まだチャンスはありませんでした。私が確認するとすぐに正しいとマークします。 – Phil