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

Question

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

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

Answer 1

我找到了解决方案。我使用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(); 
}); 

Answer 2

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

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

然后我将取代图表用新的和使用jQuery 淡入（）以使图表返回到图。

编辑

了jQuery淡出/淡入函数的第一个参数是一个可选的速度参数，所以你可以一次动画，使他们“模糊”起来。