我可以使用渐变将一个饼图转换成另一个饼图吗?

Can I transition one pie chart into a different one using a fade?

本文关键字：转换 另一个 一个 渐变 可以使 我可以      更新时间：2023-09-26

我使用Highcharts v.2.3.3，并建立了一个饼状图。当用户点击某项内容时，我可以用另一个图表替换该图表，但替换是即时发生的。有没有办法让第一个饼图淡出，而新的饼图淡入，所以有一个"模糊"的效果?

注意:第一个饼状图目前会在新图表建立之前被删除。

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

我将使用jquery淡出当前的图表容器，像这样:

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

然后我会用新的图表替换，并使用jqueryfadeIn()使图表回到视图中。

编辑

jquery的fadeOut/fadeIn函数的第一个参数是一个可选的速度参数，所以你可以定时的动画，使他们"模糊"在一起。

相关文章：