标签： const label tooltipItem 93 缺陷 data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饼图示例</title>
<script src="/chart.js"></script>
<style>
.btn1{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="btn1">
<canvas id="myPieChart" width="400" height="400"></canvas>
</div>
<script>
// 获取canvas元素
const ctx = document.getElementById('myPieChart').getContext('2d');
// 定义饼图数据
const data = {
labels: [
'严重缺陷：23',
'一般缺陷:93',
'致命缺陷：88'
],
datasets: [{
label: '缺陷分布',
data: [23, 93, 88], // 严重缺陷和一般缺陷的数量、致命缺陷的数量
backgroundColor: [
'#ff6384', // 严重缺陷的颜色
'#36a2eb', // 一般缺陷的颜色
'#f3c' //致命缺陷
],
hoverOffset: 4
}]
};
// 定义饼图配置
const config = {
type: 'pie', // 图表类型
data: data, // 图表数据
options: {
responsive: true, // 响应式设计
plugins: {
tooltip: {
callbacks: {
label: function (tooltipItem) {
// 格式化标签显示
const label = tooltipItem.label || '';
const value = tooltipItem.raw;
const percentage = Math.round((value / (23 + 93)) * 100); // 计算百分比
return `${label}: ${value} (${percentage}%)`;
}
}
}
}
}
};
// 创建饼图实例
const myPieChart = new Chart(ctx, config);
</script>
</body>
</html>
标签：,
const,
label,
tooltipItem,
93,
缺陷,
data
From： https://www.cnblogs.com/fengkunlei/p/18499448