Chart.js 饼图：全面解析与实例教程

Chart.js 饼图：全面解析与实例教程

引言

Chart.js 是一个基于 HTML5 Canvas 的图表库，它可以帮助开发者轻松地在网页上创建各种类型的图表。其中，饼图是图表库中最常用的图表类型之一，用于展示数据占比情况。本文将详细介绍 Chart.js 饼图的使用方法，包括基本配置、交互效果以及实例教程。

一、Chart.js 饼图基本配置

1.1 引入 Chart.js 库

首先，在 HTML 文件中引入 Chart.js 库。可以通过 CDN 或下载源码的方式引入。

<script></script>

1.2 准备数据

饼图需要的数据格式为一个数组，数组中的每个元素代表一个数据部分，可以是一个数字或字符串。

const data = { labels: ['红色', '蓝色', '绿色'], datasets: [{ label: '数据占比', data: [300, 50, 100], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] };

1