0

我无法将下面的代码转换为与 Chart.js 2.0 一起使用。我的图表对象是使用所需的...

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

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

首先，我在图表本身上绑定了一个点击事件，所以当用户点击它时，它会调用一个自定义函数，传入用户点击的段（饼图的一块）。在之前的 1.0 版本的 Chart.js 中，我可以调用下面的代码并且效果很好。它可以让我看到 .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();
    });
});

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

4

1 回答 1

1

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

于 2016-12-14T19:03:17.080 回答