在 mouseenter generateLegend Chartjs 2 上突出显示甜甜圈段
Highlight doughnut segment on mouseenter generateLegend Chartjs 2
正如标题所说,我试图根据图例突出显示图表中的一个部分(在 mouseenter 事件 上)。我正在使用 generateLegend 创建我的自定义图例,但我不确定如何将 mouseenter 事件附加到每个项目。
这是我目前所拥有的link
window.onload = function() {
setTimeout(function(){
var outerCircle = new Chart(document.getElementById("outer-circle"),{
"type":"doughnut",
"data":{
"labels":["Beer","Wine","Pisco","Vodka","Rum","Tequila"],
"datasets":[{
"label":"Drinks",
"data":[
30,
20,
5,
15,
15,
15
],
"backgroundColor":[
"#fdc694",
"#ad937c",
"#d8c2ae",
"#bab8b6",
"#e5aa74",
"#fcf0e5"
]
}]
},
"options":{
"legend":{
"display":false
},
"tooltips": {
"mode": 'label',
"callbacks": {
"label": function(tooltipItem, data) {
return " "+data['labels'][tooltipItem['index']] + " " + data['datasets'][0]['data'][tooltipItem['index']] + '%';
}
}
}
}
});
var diagramLegend = document.getElementById('diagram-legend');
diagramLegend.innerHTML = outerCircle.generateLegend();
}, 300);
}
任何关于代码的提示或帮助都会很棒,我已经花了几个小时但没有成功,文档对此也不是很清楚。
当鼠标悬停在自定义图例项上时,您可以使用以下函数突出显示圆环图的相应部分:
function highlightSegment(chart, index, isHighlight) {
var activeSegment = chart.getDatasetMeta(0).data[index];
if (isHighlight) chart.updateHoverStyle([activeSegment], null, true);
else chart.updateHoverStyle([activeSegment], null, false);
chart.draw();
}
但是,首先您需要将两个事件监听器 (mouseenter 和 mouseleave) 附加到每个 li
(图例)elements/items然后调用上面的函数,传入chart-instance,legend-item-index和一个布尔值(是否add/remove高亮) , 分别作为第一个、第二个和第三个参数。
var outerCircle = new Chart(document.getElementById("outer-circle"), {
"type": "doughnut",
"data": {
"labels": ["Beer", "Wine", "Pisco", "Vodka", "Rum", "Tequila"],
"datasets": [{
"label": "Drinks",
"data": [
30,
20,
5,
15,
15,
15
],
"backgroundColor": [
"#fdc694",
"#ad937c",
"#d8c2ae",
"#bab8b6",
"#e5aa74",
"#fcf0e5"
]
}]
},
"options": {
"legend": {
"display": false
},
"tooltips": {
"mode": 'label',
"callbacks": {
"label": function(tooltipItem, data) {
return " " + data['labels'][tooltipItem['index']] + " " + data['datasets'][0]['data'][tooltipItem['index']] + '%';
}
}
}
}
});
var diagramLegend = document.getElementById('diagram-legend');
diagramLegend.innerHTML = outerCircle.generateLegend();
/*** Highlight Doughnut Segment on Legend Hover ***/
var legendItems = document.querySelectorAll('#diagram-legend li');
legendItems.forEach(function(item, itemIndex) {
item.addEventListener('mouseenter', function() {
highlightSegment(outerCircle, itemIndex, true);
});
item.addEventListener('mouseleave', function() {
highlightSegment(outerCircle, itemIndex, false);
});
});
function highlightSegment(chart, index, isHighlight) {
var activeSegment = chart.getDatasetMeta(0).data[index];
if (isHighlight) chart.updateHoverStyle([activeSegment], null, true);
else chart.updateHoverStyle([activeSegment], null, false);
chart.draw();
}
#pie-wrapper {
width: 300px;
height: 300px;
}
#diagram-legend ul {
list-style: none;
padding: 0;
margin: 0;
}
#diagram-legend ul li {
margin-bottom: 10px;
}
#diagram-legend ul li span {
width: 15px;
height: 15px;
display: inline-block;
vertical-align: sub;
margin-right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="pie-wrapper">
<canvas id="outer-circle" width="300" height="300"></canvas>
</div>
<div id="diagram-legend"></div>
color: [
{
backgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
borderColor: 'rgba(255, 255, 255, 0)',
hoverBackgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderWidth: 10,
hoverRadius: 0
}
],
它在鼠标输入时工作正常,突出显示 angular 2(ng2 图表)中的活动部分用于圆环图
正如标题所说,我试图根据图例突出显示图表中的一个部分(在 mouseenter 事件 上)。我正在使用 generateLegend 创建我的自定义图例,但我不确定如何将 mouseenter 事件附加到每个项目。
这是我目前所拥有的link
window.onload = function() {
setTimeout(function(){
var outerCircle = new Chart(document.getElementById("outer-circle"),{
"type":"doughnut",
"data":{
"labels":["Beer","Wine","Pisco","Vodka","Rum","Tequila"],
"datasets":[{
"label":"Drinks",
"data":[
30,
20,
5,
15,
15,
15
],
"backgroundColor":[
"#fdc694",
"#ad937c",
"#d8c2ae",
"#bab8b6",
"#e5aa74",
"#fcf0e5"
]
}]
},
"options":{
"legend":{
"display":false
},
"tooltips": {
"mode": 'label',
"callbacks": {
"label": function(tooltipItem, data) {
return " "+data['labels'][tooltipItem['index']] + " " + data['datasets'][0]['data'][tooltipItem['index']] + '%';
}
}
}
}
});
var diagramLegend = document.getElementById('diagram-legend');
diagramLegend.innerHTML = outerCircle.generateLegend();
}, 300);
}
任何关于代码的提示或帮助都会很棒,我已经花了几个小时但没有成功,文档对此也不是很清楚。
当鼠标悬停在自定义图例项上时,您可以使用以下函数突出显示圆环图的相应部分:
function highlightSegment(chart, index, isHighlight) {
var activeSegment = chart.getDatasetMeta(0).data[index];
if (isHighlight) chart.updateHoverStyle([activeSegment], null, true);
else chart.updateHoverStyle([activeSegment], null, false);
chart.draw();
}
但是,首先您需要将两个事件监听器 (mouseenter 和 mouseleave) 附加到每个 li
(图例)elements/items然后调用上面的函数,传入chart-instance,legend-item-index和一个布尔值(是否add/remove高亮) , 分别作为第一个、第二个和第三个参数。
var outerCircle = new Chart(document.getElementById("outer-circle"), {
"type": "doughnut",
"data": {
"labels": ["Beer", "Wine", "Pisco", "Vodka", "Rum", "Tequila"],
"datasets": [{
"label": "Drinks",
"data": [
30,
20,
5,
15,
15,
15
],
"backgroundColor": [
"#fdc694",
"#ad937c",
"#d8c2ae",
"#bab8b6",
"#e5aa74",
"#fcf0e5"
]
}]
},
"options": {
"legend": {
"display": false
},
"tooltips": {
"mode": 'label',
"callbacks": {
"label": function(tooltipItem, data) {
return " " + data['labels'][tooltipItem['index']] + " " + data['datasets'][0]['data'][tooltipItem['index']] + '%';
}
}
}
}
});
var diagramLegend = document.getElementById('diagram-legend');
diagramLegend.innerHTML = outerCircle.generateLegend();
/*** Highlight Doughnut Segment on Legend Hover ***/
var legendItems = document.querySelectorAll('#diagram-legend li');
legendItems.forEach(function(item, itemIndex) {
item.addEventListener('mouseenter', function() {
highlightSegment(outerCircle, itemIndex, true);
});
item.addEventListener('mouseleave', function() {
highlightSegment(outerCircle, itemIndex, false);
});
});
function highlightSegment(chart, index, isHighlight) {
var activeSegment = chart.getDatasetMeta(0).data[index];
if (isHighlight) chart.updateHoverStyle([activeSegment], null, true);
else chart.updateHoverStyle([activeSegment], null, false);
chart.draw();
}
#pie-wrapper {
width: 300px;
height: 300px;
}
#diagram-legend ul {
list-style: none;
padding: 0;
margin: 0;
}
#diagram-legend ul li {
margin-bottom: 10px;
}
#diagram-legend ul li span {
width: 15px;
height: 15px;
display: inline-block;
vertical-align: sub;
margin-right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="pie-wrapper">
<canvas id="outer-circle" width="300" height="300"></canvas>
</div>
<div id="diagram-legend"></div>
color: [
{
backgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
borderColor: 'rgba(255, 255, 255, 0)',
hoverBackgroundColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderColor: ['#92d06f', '#73c8b8', '#3bb9ab'],
hoverBorderWidth: 10,
hoverRadius: 0
}
],
它在鼠标输入时工作正常,突出显示 angular 2(ng2 图表)中的活动部分用于圆环图