ChartJS 2.0 代码差异需要帮助

Question

我在转换下面的代码以使用 Chart.js 2.0 时遇到问题。我的图表对象是使用所需的创建的...

var chart = new Chart({...constructor code here...});

我已经弄清楚如何创建自定义工具提示和自定义图例，但我似乎无法弄清楚以下项目。

首先，我在图表本身绑定了一个点击事件，所以当用户点击它时，它会调用一个自定义函数，传入用户点击的段（饼图的一块）。在Chart.js之前的1.0版本中，我可以调用下面的代码，效果很好。它可以让我看到 .label 和属性以及该段的其他属性。

// Pass the segment of the pie chart the user clicks into myCustomFunction()
$('#chartDiv').click(function(evt) { 
    var activeSegment = chart.getSegmentsAtEvent(evt);
    myCustomFunction(activeSegment);
}).css('cursor','pointer');

我想不通的另一件事是我想向我的自定义图例项添加 mouseenter 和 mouseleave 事件。当用户将鼠标悬停在图例项上时，它将弹出该段的正确工具提示。当他们离开时，工具提示关闭。这是我在 ChartJS 1.0 上使用的代码。

// Tie the legend to the chart tooltips
var helpers = Chart.helpers;
var chartLegend = document.getElementById("chartLegend");
helpers.each(chartLegend.firstChild.childNodes, function(legendNode, index){
    helpers.addEvent(legendNode, 'mouseenter', function(){
        var activeSegment = chart.segments[index];
        activeSegment.save();
        activeSegment.fillColor = activeSegment.highlightColor;                 
        chart.showTooltip([activeSegment], true);
        activeSegment.restore();
    });             
    helpers.addEvent(legendNode, 'mouseleave', function(){
        chart.draw();
    });
});

如果有人能帮我解决这个问题，我将不胜感激。谢谢！

Answer 1

对于 onclick 事件，您可以使用 var activeSegment = chart.getElementAtEvent(evt);

ChartJS 2.0 代码差异需要帮助

ChartJS 2.0 differences in code help needed

javascript

jquery

chart.js

chart.js2