Chart.js 雷达图

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

Chart.js 雷达图是一种显示数据元素点和变化并比较不同数据集的方法。本文将向您介绍如何生成雷达图和用户配置。

语法

使用雷达图的语法如下

 
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});   

数据集属性

每个数据集都可以使用雷达图提供各种属性。使用这些可以设置特定数据集的显示属性。例如，这是设置线条颜色的方式。

您可以将任何点*属性指定为数组。通过将它们设置为数组值，第一个值将应用于第一个点，第二个值应用于第二个点，依此类推。

名称	类型	描述
label	String	设置数据集的标签，并在图例和工具提示中显示。
backgroundColor	颜色/颜色[]	设置线条下方的填充颜色。
borderColor	颜色/颜色[]	设置线条的颜色。
borderWidth	数字/数字[]	设置线条的像素宽度。
borderDash	数字[]	设置边框虚线的长度和间距。
borderDashOffset	数字	设置边框虚线的偏移量。
borderCapStyle	String	设置边框线的端点样式。
borderJoinStyle	String	设置线条连接样式。
fill	布尔值/字符串	设置填充线条下方的区域。
lineTension	数字	设置线条的贝塞尔曲线张力。设置为 0 以绘制雷达的直线
pointBackgroundColor	颜色/颜色[]	设置点的填充颜色。
pointBorderColor	颜色/颜色[]	设置点的边框颜色。
pointBorderWidth	数字/数字[]	设置点的边框宽度（以像素为单位）。
pointRadius	数字/数字[]	设置点形状的半径。如果设置为 0 值，则不渲染该点。
pointStyle	字符串/字符串[]/图像/图像[]	设置点的样式。
pointHitRadius	数字/数字[]	设置应用于鼠标事件后未显示的点的像素大小。
pointHoverBackgroundColor	颜色/颜色[]	设置悬停后点的背景颜色。
pointHoverBorderColor	颜色/颜色[]	设置悬停后点的边框颜色。
pointHoverBorderWidth	数字/数字[]	设置悬停后点的边框宽度。
pointHoverRadius	数字/数字[]	设置悬停后点的半径。

雷达图示例

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

示例 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 radar 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: 'radar',
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 radar 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: 'radar',
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 radar 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: 'radar',
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: ['lightblue'],
pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'blue', 'gold'],
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 radar 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: 'radar',
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: ['lightblue'],
pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'blue', 'gold'],
borderColor: ['black'],
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 radar graph with hover effect </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: 'radar',
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: ['lightblue'],
pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'blue', 'gold'],
borderColor: ['black'],
borderWidth: 2,
pointRadius: 6,
pointHoverBackgroundColor:['black'],
pointHoverRadius:8,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的雷达图。

结论

雷达图用于获取类似类型数据的点元素。我们可以通过边框和线条设置点以获取图表的正确数据。

下一主题Chartjs-scatter-chart

Chart.js 雷达图

语法

数据集属性

雷达图示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 雷达图

语法

数据集属性

雷达图示例

结论

相关帖子

Chart.js 图例

Chart.js 极地区域图

Chart.js 散点图

Chart.js 条形图

Chart.js 动画

Chart.js 混合类型图表

Chart.js 副标题

Chart.js 基础和插件开发者

Chart.js 气泡图

Chart.js 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器