我可以使用淡出將一個餅圖轉換爲另一個餅圖嗎？

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淡出/淡入函數的第一個參數是一個可選的速度參數，所以你可以一次動畫，使他們「模糊」起來。