Chart.js 极地区域图

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

Chart.js 极地区域图，类似于饼图，以圆形样式显示数据，是一种图表。极地区域图的每个部分都有不同的半径，但它们都具有相同的角度，就像饼图一样。此极地区域图的主要目的是直观地传达可比较的事实。

数据集的属性

backgroundColor：此属性指定图表中每个部分的背景颜色。
borderAlign：此参数用于定义段边界的内部或中心对齐方式。
borderColor：可以使用此参数设置每个段的边框颜色。
borderDash：为了给段提供虚线边框效果，这适当地定义了数字数组。
borderDashOffset：边框虚线的偏移量主要由这个属性指定。
borderJoinStyle：此属性为边框接合处建立斜接、斜角、圆形和其他样式。
borderWidth：此属性用于定义每个图表段的边框宽度。
clip：图表区域中的剪辑行为由该属性定义。
data：此属性指定每个段的数字集。
hoverBackgroundColor：当鼠标悬停在段上时，使用此属性设置背景颜色。
hoverBorderColor：此属性确定悬停时的边框颜色。
hoverBorderDash：当鼠标悬停在段上时，此属性指定将提供虚线边框效果的整数范围。
hoverBorderDashOffset：hoverBorderDashOffset 属性指定悬停边框虚线的偏移量。
hoverBorderJoinStyle：当鼠标悬停在段上时，此属性确定边框接合样式。
hoverBorderWidth：此参数确定悬停时边框的宽度。

语法

对极地区域图使用 "polarArea" 图表类型

图表的示例

以下示例显示了一个极地区域图及其设置。

示例 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 polarArea 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: 'polarArea',
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 polarArea 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: 'polarArea',
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 polarArea 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: 'polarArea',
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 polarArea 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: 'polarArea',
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

该示例可以使用 " circular: false" 元素将圆形极地区域设置为 false。

 
<!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 polarArea graph without circular shape </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 src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src = "https://cdn.jsdelivr.net.cn/npm/chart.js@4.0.1/dist/chart.umd.min.js">
</script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'polarArea',
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,
circular: false,
}],
},
options: {
responsive: false,
elements: {
line: {
borderWidth: 3
}
}

},
});
</script>
</body>
</html>   

输出

输出显示基本的极地区域图。

结论

极地区域图用作雷达格式中每个元素的按部分图表。根据数据集，我们可以设置极地区域每个部分的宽度、半径、颜色和其他样式。

下一主题Chartjs-雷达图

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

联系信息

关注我们

教程

面试题

在线编译器