0

我这里有一个饼图。在单击事件时，它会向下钻取，而在鼠标悬停时，它会执行切片动画。切片动画是从 Pawel Fus的答案复制而来

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

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

单击它进行向下钻取时，它会破坏图表。

我不确定我做错了什么，但我猜鼠标悬停事件在向下钻取时搞砸了。

如果我能让这两个功能一起工作，那就太好了。

4

1 回答 1

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
            });
        }
    }
}
于 2013-07-12T12:43:07.870 回答