在 mouseenter generateLegend Chartjs 2 上突出显示甜甜圈段答案

【问题标题】：Highlight doughnut segment on mouseenter generateLegend Chartjs 2在 mouseenter generateLegend Chartjs 2 上突出显示甜甜圈段
【发布时间】：2017-09-06 09:39:16
【问题描述】：

正如标题所说，我正在尝试根据图例突出显示图表中的一段（在 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);

  }

任何关于代码的提示或帮助都会很棒，我已经花费了几个小时但没有成功，文档对此也不是很清楚。

【问题讨论】：

标签： javascript charts chart.js chartjs-2.6.0

【解决方案1】：

当您将鼠标悬停在自定义图例项上时，您可以使用以下函数突出显示圆环图的相应部分：

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 (legend) 元素/项目，然后调用上面的函数，传递chart-instance、legend-item-index和一个布尔值（是否添加/删除高亮），分别作为第一、第二和第三个参数。

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

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>

【讨论】：

太棒了！！！感谢您的帮助，解释非常清楚。最后一件事，你如何也显示工具提示？（我也忘了提，抱歉）。

【解决方案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（ng2 图表）中的活动段

【讨论】：