Chart.js 饼图指南

Chart.js 饼图指南

引言

Chart.js 是一个流行的开源库，用于在网页上创建交互式图表。其中，饼图是一种展示数据占比的图表类型，非常适合用于展示各个部分相对于整体的比例。本文将详细介绍如何使用 Chart.js 创建一个饼图，包括基本设置、数据配置、样式调整以及交互功能。

基本设置

1. 引入 Chart.js

首先，需要在 HTML 文件中引入 Chart.js 的 CSS 和 JavaScript 文件。

<script></script> <link>

2. 准备容器

在 HTML 中，创建一个用于显示饼图的容器元素。

<canvas></canvas>

数据配置

1. 准备数据

饼图需要两个数组：一个用于存储每个部分的名称，另一个用于存储对应部分的数值。

const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']; const data = [12, 19, 3, 5, 2, 3];

2. 创建配置对象

配置对象中包含了饼图的各种设置，如标题、类型、数据等。

const config