用html、css、JS帮我画一个饼图

好的，以下是一个简单的饼图示例： HTML 代码： ```html ``` CSS 代码： ```css .pie-chart { position: relative; width: 300px; height: 300px; } #chart { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` JS 代码： ```javascript const data = [ { label: 'A', value: 30, color: '#f44336' }, { label: 'B', value: 20, color: '#9c27b0' }, { label: 'C', value: 50, color: '#2196f3' } ]; const canvas = document.getElementById('chart'); const ctx = canvas.getContext('2d'); // 计算总值 const totalValue = data.reduce((sum, item) => sum + item.value, 0); // 绘制饼图 let startAngle = 0; data.forEach(item => { const angle = (item.value / totalValue) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height / 2); ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, startAngle + angle); ctx.fillStyle = item.color; ctx.fill(); startAngle += angle; }); // 绘制图例 let legendHTML = ''; data.forEach(item => { legendHTML += ``; }); document.querySelector('.pie-chart').insertAdjacentHTML('beforeend', ``); ``` 解释： 1. HTML 代码中，我们使用一个 `canvas` 元素来绘制饼图，将其包裹在一个容器元素内，并设置容器元素的宽度和高度。 2. CSS 代码中，我们设置容器元素为相对定位，`canvas` 元素为绝对定位，并将其宽度和高