1

正如标题所说，我试图根据图例（在 mouseenter 事件上）突出显示图表中的一个段。我正在使用generateLegend创建我的自定义图例，但我不确定如何将 mouseenter 事件附加到每个项目。

这是我到目前为止的链接

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);

  }

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

4

2 回答 2

3
于 2017-09-06T10:43:53.437 回答
0 
    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 图表）中的活动段

于 2017-11-30T12:18:00.667 回答