好的，以下是一个简单的饼图示例：
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 += `
${item.label}: ${item.value}
`;
});
document.querySelector('.pie-chart').insertAdjacentHTML('beforeend', `
${legendHTML}
`);
```
解释：
1. HTML 代码中，我们使用一个 `canvas` 元素来绘制饼图，将其包裹在一个容器元素内，并设置容器元素的宽度和高度。
2. CSS 代码中，我们设置容器元素为相对定位，`canvas` 元素为绝对定位，并将其宽度和高
Ai助手
资讯
常用工具
网站模板