js 动态饼状图

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

<canvas id="myPieChart"></canvas>

// 获取canvas元素的上下文
var ctx = document.getElementById('myPieChart').getContext('2d');

// 初始数据
var data = {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
        data: [300, 50, 100],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
};

// 创建饼状图
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// 更新饼状图的函数
function updatePieChart(newData) {
    myPieChart.data.datasets[0].data = newData;
    myPieChart.update(); // 更新图表
}

// 假设我们有一些新的数据
var newData = [400, 30, 80];
updatePieChart(newData); // 调用函数更新图表