javascript - 我可以使用淡入淡出将一个饼图转换为另一个饼图吗？

Question

我正在使用 Highcharts v.2.3.3 并构建了一个饼图。当用户点击某个东西时，我可以用另一个图表替换该图表，但替换会立即发生。有没有办法让第一个饼图淡出而新饼图淡入，所以有“模糊”效果？

注意：当前第一个饼图在构建新图表之前被删除。

Answer 1

我会像这样使用 jquery 淡出当前图表容器：

$('#ChartContainer').fadeOut();

然后我会用新的图表替换图表并使用 jquery fadeIn() 将图表重新显示在视图中。

编辑

jquery fadeOut/fadeIn 函数的第一个参数是可选的速度参数，因此您可以对动画进行计时，以便它们“模糊”在一起。

Answer 2

我找到了解决方案。我使用 jquery 克隆了第一个图表的 svg 元素并将其附加到绝对位于图表区域上方的 div 中。然后，我使用该“虚拟”图表进行淡出动画，而无需在第二个图表中淡入淡出。

var clonedChart = $('#chartContainer').find('svg').clone();
$('<div class="cloned_chart"></div>').append(clonedChart).appendTo('#pieChartWrapper');

// delete first chart and create second one
....

// chart creation callback
$('.cloned_chart').fadeOut('slow', function(){
  $(this).remove();
});