chart.js饼图-如何使用平滑过渡更新数据集

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart"></canvas>

// 获取canvas元素
var ctx = document.getElementById('myChart').getContext('2d');

// 创建初始的饼图
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['数据1', '数据2', '数据3'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: ['red', 'blue', 'green']
        }]
    }
});

// 更新数据集
function updateData(newData) {
    myChart.data.datasets[0].data = newData;
    myChart.update({
        duration: 800, // 过渡动画的持续时间（毫秒）
        easing: 'easeOutBounce' // 过渡动画的缓动函数
    });
}

// 示例：点击按钮更新数据集
document.getElementById('updateButton').addEventListener('click', function() {
    var newData = [40, 15, 25];
    updateData(newData);
});

<button id="updateButton">更新数据集</button>