Chart.js 雷达图

原创

于 2025-10-17 22:15:33 发布 · 450 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Chart.js 雷达图

雷达图是一种非常实用的图表类型，它能够将多个数据维度以图形的方式展现出来，特别适合于展示和分析多变量数据。Chart.js 是一个强大的 JavaScript 库，它支持多种图表类型，其中包括雷达图。本文将详细介绍如何使用 Chart.js 创建雷达图，包括基本用法、样式定制和交互功能。

一、Chart.js 雷达图基本用法

1.1 引入 Chart.js 库

首先，需要在项目中引入 Chart.js 库。可以通过以下两种方式引入：

通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

通过 npm 引入：

npm install chart.js

1.2 准备数据

雷达图的数据需要以二维数组的形式提供，其中第一维是标签（如：姓名、年龄、收入等），第二维是数据（如：张三的年龄、李四的年龄等）。

const labels = [
  '年龄',
  '收入',
  '教育程度',
  '工作满意度'
];

const data = {
  labels: labels,
  datasets: [{
    label: '张三',
    data: [25, 3000, 10, 8],
    fill: true,
    borderColor: 'rgba(75, 192, 192, 1)',
    tension: 0.1
  }, {
    label: '李四',
    data: [30, 5000, 12, 7],
    fill: true,
    borderColor: 'rgba(255, 99, 132, 1)