2

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

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);
        }
    }});
}

气泡似乎非常轻微地移动，然后什么也没有，但没有错误消息可以跟踪。

4

1 回答 1

0

从 Highcharts v5.0.7 开始，气泡不再是圆，而是路径，所以需要动画x和y属性：

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

现场演示： https ://jsfiddle.net/BlackLabel/t6z5wL4j/

于 2019-10-14T09:37:33.790 回答