Question

https://plnkr.co/edit/JCOQa1vdqU9KBusqlOlL?p=preview 你好我做了一个简单的圆环图演示。我想在传说上获得鼠标悬停事件和鼠标输出事件。我能够在甜甜圈切片上获得鼠标悬停事件。它工作正常。我想在传说中使用相同的功能。我在传奇上获得鼠标悬停事件但我的mouseout事件没有被解雇为什么？

   $(chart.series[1].data).each(function(i, point) {
                $(point.legendItem.element).hover(function () {
                    // on over
                    for (var i = 0; i < chart.series[1].data.length; i++) {

                        chart.series[1].data[i].update({
                            color: i === point.index ? point.options.origColor:'grey'
                        }, false, false);
                    }
                    chart.series[1].chart.redraw();
                }, function () {
                    // on mouseout
                    alert('--')
                });
            });

鼠标移出时我想把它移到原始/相同状态

Answer 1

我在传奇上获得鼠标悬停事件，但我的mouseout事件没有被解雇为什么？

正如Ryan Gill已经指出的那样，问题出在chart.redraw()。在这种情况下，我不确切知道鼠标事件是如何工作的。当图例div更新时，看起来鼠标悬停事件就会丢失。

但是如果我理解你的“真正”问题是重置传奇鼠标离开事件的数据选择，这是一个解决方法：

我在您的悬停功能中添加了chart.legend.options.mouseOverLegend = true;并删除了鼠标离开事件监听器：

$(chart.series[1].data).each(function(i, point) {
    $(point.legendItem.element).hover(function () {
        // on over
        for (var i = 0; i < chart.series[1].data.length; i++) {

            chart.series[1].data[i].update({
                                               color: i === point.index ? point.options.origColor:'grey'
                                           }, false, false);
        }
        chart.series[1].chart.redraw();
        chart.legend.options.mouseOverLegend = true;
    });
});

而且我在svg元素上添加了鼠标在事件监听器上。使用mouseOverLegend只对系列数据进行一次迭代：

$('#container').find('svg').on('mouseover',function() {
    var isMouseOverLegend = chart.legend.options.mouseOverLegend === true;
    if (isMouseOverLegend) {
        var isDirty = false;
        for (var i = 0; i < chart.series[1].data.length; i++) {
            if (chart.series[1].data[i].color == 'grey') {
                isDirty = true;
                chart.series[1].data[i].update({
                                                   color: chart.series[1].data[i].options.origColor
                                               }, false, false);
            }
        }
        chart.legend.options.mouseOverLegend = false;
        if (isDirty) {
            chart.redraw();
        }
    }
});

为什么要在高阶图中的传奇中获取鼠标？

1 个答案: