高图表版本中的更改破坏了元素的动画 [英] Change in highcharts version breaks animation of elements

问题描述

美好的一天！当Google决定放弃气泡图时，我们为气泡图编写了一些基本的动画逻辑，以创建非常基本的Gapminder运动图版本.一切都很好，直到我们最近通过更新我们的jquery/ui/highcharts版本开始运行.我看不到5.06和5.07之间的变更日志中发生了什么更改，但会破坏它，但似乎是在这两个版本中.jQuery版本似乎没有影响它.有什么想法吗?

Good day! We wrote some basic animation logic for bubble charts to create a very basic version of the Gapminder motion charts when Google decided to abandon them. All was well until we recently started a run through updating our versions of jquery/ui/highcharts. I can't see what would have changed in the changelog between 5.06 and 5.07 that would have broken it, but it seems to be in those two versions. The jquery version doesn't seem to impact it. Any ideas?

function animateCircle(dataObject, year, autoContinue){
    var country = dataObject.graphic.element.getAttribute('name'),
        data = translatedData[year][country],
        rawData = getDataByYearByCountry(year, country);

    dataObject.x = rawData.x;   
    dataObject.y = rawData.y;   
    dataObject.z = rawData.z;   

    if(theChart.hoverPoint==dataObject){
        theChart.tooltip.label.attr('text', '<b>'+country+' ('+ year +')</b><br/>'+xAxisVariable+': '+rawData.x+'<br/>'+yAxisVariable+': '+rawData.y+'<br/>'+zAxisVariable+': '+rawData.z);
    }

    currentYear = year;

    yearSlider.slider('option', 'value', year);
    yearSlider.slider('option', 'slide').call(yearSlider, null, {value: year});

    dataObject.graphic.isAnimating = true;

    dataObject.graphic.animate({cx: data.x, cy: data.y, r: data.z}, {duration: 1000, easing: 'linear', complete: function(){
        this.isAnimating = false;
        if(autoContinue && !stoppingAnimationNow){
            animateCircle(dataObject, year==2013 ? 2000 : year+1, autoContinue);
        }
    }});
}

气泡似乎发生了很小的变化，然后没有任何变化，但是没有错误消息可以跟踪.

The bubbles seem to shift very slightly, and then nothing, but there are no error messages to track through.

推荐答案

自Highcharts v5.0.7起，气泡不再是圆形，而是路径，因此您需要为 x 和 y设置动画属性:

Since Highcharts v5.0.7, bubbles are no longer circles, but paths, so you need to animate x and y properties:

    dataObject.graphic.animate({
        x: data.x,
        y: data.y,
        r: data.z
    }, ...);

---

实时演示: https://jsfiddle.net/BlackLabel/t6z5wL4j/

这篇关于高图表版本中的更改破坏了元素的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！