美好的一天!我们为气泡图编写了一些基本的动画逻辑,以便在Google决定放弃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);
}
}});
}
气泡似乎非常轻微地移动,然后什么都没有,但没有错误消息可以跟踪。
从 Highcharts v5.0.7 开始,气泡不再是圆圈,而是路径,因此您需要对x
和y
属性进行动画处理:
dataObject.graphic.animate({
x: data.x,
y: data.y,
r: data.z
}, ...);
现场演示:https://jsfiddle.net/BlackLabel/t6z5wL4j/