Chart.js 饼图

2025年5月18日 | 5 分钟阅读

最常见的图表类型是 Chart.js 甜甜圈图。饼图被分成不同的部分。每个扇形弧都显示图表中的数据。

切口的内部部分默认为 0%。在本文中，您将学习如何制作饼图并使用分段。

饼图的数据集属性

下面列出了甜甜圈图和饼图数据集的一些属性。

dataset[index]: 此属性允许您通过在给定索引处指定特定的数据集来自定义图表中的每个数据集。
全局属性 options.datasets.doughnut: 此选项适用于甜甜圈图中的每个数据集，并为整个图表提供其样式和配置。
datasets.pie: 此全局属性选项适用于饼图中的所有数据集，并为每个切片提供其样式和配置。
图表中描述饼图或甜甜圈的每个拱形元素都使用 options.elements.arc 属性。
options: 此全局属性适用于整个图表，从而可以自定义图表的轴、图例和其他配置的设置。

语法

饼图的语法如下

 
Type: 'pie',
OR
new Chart($("#ID"), {
type: 'doughnut'/'pie'
data: { ... },
options: { ... }
});   

CDN 链接

以下链接用于获取 chart.js 图表。

 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>   

饼图示例

以下示例显示了饼图及其设置。

示例 1

该示例显示了基本的饼图。根据元素和数据显示基本的饼图及其 UI。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with pie graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'pie',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的饼图。

示例 2

该示例显示了彩色饼图。我们可以将背景颜色设置为不同的颜色。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with pie graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'pie',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderWidth: 5,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的饼图。

示例 3

该示例可以使用不同的颜色阴影设置背景、边框、点和其他元素。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with pie graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'pie',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['black'],
borderWidth: 2,
pointRadius: 6,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的饼图。

示例 4

我们可以设置边框宽度、线宽和点半径的大小。

 
 <!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with pie graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'pie',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'blue', 'gold'],
borderColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'blue', 'gold'],
borderWidth: 2,
pointRadius: 6,
}],
},
options: {
responsive: false,
elements: {
line: {
borderWidth: 3
}
}
},
});
</script>
</body>
</html>  

输出

输出显示了基本的饼图。

示例 5

该示例可以使用鼠标事件或悬停效果设置边框宽度、线宽和点半径。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with pie graph </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'pie',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'blue', 'gold'],
borderColor: ['red', 'yellow', 'green', 'navy', 'gold', 'blue'],
borderWidth: 4,
pointRadius: 6,
hoverBorderColor: 'white',
hoverBackgroundColor: 'grey',
}],
},
options: {
responsive: false,
elements: {
line: {
borderWidth: 3
}
}
},
});
</script>
</body>
</html>   

输出

输出显示了基本的饼图。

结论

饼图用于每个元素的截面图。我们可以根据数据集设置饼图每个部分的宽度、半径、颜色和其他样式。

下一个主题Chartjs-polar-area-chart

Chart.js 饼图

饼图的数据集属性

语法

CDN 链接

饼图示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

Chart.js 饼图

饼图的数据集属性

语法

CDN 链接

饼图示例

结论

相关帖子

Chart.js UI 颜色

Chart.js 通用数据结构

Chart.js 选项和内边距

Chart.js 教程

Chart.js 字体配置

如何在 ChartJS 中动态更新值

Chart.js API 开发者

Chart.js 基础和插件开发者

Chart.js 标题

Chart.js 基础概念

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器