Question

我有一张饼图here。在点击事件中，它向下钻取并在鼠标悬停时执行切片动画。切片动画从Pawel Fus的答案here中复制

我在饼图上的事件点如下，

mouseOut: function () {
    setTranslation(this, false);
},
mouseOver: function() {
    setTranslation(this, true);
},
click: function() {
    var drilldown = this.drilldown;
    if (drilldown) { // drill down
        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
    } else { // restore
        setChart(name, categories, data);
    }
}

并且其中使用的函数是

function setChart(name, categories, data, color) {
    chart.xAxis[0].setCategories(categories);
    chart.series[0].remove();
    chart.addSeries({
        name: name,
        data: data,
        pointPadding: -0.3,
        borderWidth: 0,
        pointWidth: 15,
        shadow: false,
        color: color || 'white'
    });
}

function setTranslation(p, slice){
    p.sliced = slice;
    if(p.sliced){
        p.graphic.animate(p.slicedTranslation);
    } else {
        p.graphic.animate({
            translateX: 0,
            translateY: 0
        });
    }
}

我遇到的问题是它抛出异常：

Uncaught TypeError: Property 'select' of object #<Object> is not a function highcharts.src.js:12364

点击图表进行深入分析时会打破图表。

我不确定我做错了什么，但我猜看鼠标悬停事件在钻取过程中搞砸了。

如果我能同时使这两个功能协同工作，那就太棒了。

Answer 1

问题在于实际运行的动画。我建议不要使用设置翻译到饼图，直到切片的所有动画都没有，请参阅：http://jsfiddle.net/5H675/5/

function setTranslation(p, slice) {
    p.sliced = slice;
    if (!$(p.graphic).is(':animated')) {
        if (p.sliced) {
            p.graphic.animate(p.slicedTranslation);
        } else {
            p.graphic.animate({
                translateX: 0,
                translateY: 0
            });
        }
    }
}

Highcharts饼图与切片动画和钻取onclick一起抛出图表中的异常并打破饼图

1 个答案: