在本教程中，您将了解可以使用 chart.js 创建的两种新图表类型：雷达图和极地图。就像之前的教程一样，我们将从图表类型的简要概述开始，然后进行更详细的讨论。
创建雷达图
当您只想比较大量对象的一个或两个属性时，折线图和条形图非常有用，例如，亚洲所有***的人口或大气中不同污染物的数量。
假设您只想比较三种不同液体的密度、不透明度、粘度、折射率和沸点。为这些数据创建条形图会有问题，因为您需要为每种液体创建五个不同的列。也很难比较液体的相应特性。
在您必须比较少数对象的大量属性的情况下，创建雷达图是可视化和比较数据的最有效方法。这些图表也称为蜘蛛图。
来自Wikipedia的雷达图是一种以二维图表的形式显示多变量数据的图形方法，该图表由从同一点开始的轴上表示的三个或更多定量变量组成。轴的相对位置和角度通常是无信息的。
现在让我们创建我们的第一个雷达图。雷达图是通过将typeChart.js 中的键设置为radar. 这是一个非常基本的例子。
varradarChart = newChart(markscanvas, type: "radar", data: tag data, options: chart options});
让我们绘制一个班级的两个学生在五个不同科目中的分数。这是提供用于创建图表的数据的代码。
variable tag data = {
tags: ["English", "Mathematics", "Physics", "Chemistry", "Biology", "History"],
data set:[
{
Labels: "Martha",
background-color: "#FFF17644",
border color: "black",
border width: 1,
Data: [65, 75, 70, 80, 60, 80]
},
{
tags: "Steven",
Background color: "#8E24AA44",
border color: "black",
border width: 1,
Data: [54, 65, 60, 70, 90, 75]
}
]};var chartOptions = {
plugin: {
title: {
display: true,
alignment: "start",
Text: "Comparing Student Performance"
},
legend: {
Alignment: "start"
}
},
scales:{
change:{
point label: {
font: {
Size: 20
}
}
}
}};varradarChart = newChart(marksCanvas,
type: "radar",
data: tag data,
options: chart options});雷达图可能有很多重叠，因此很难在没有任何颜色编码的情况下正确识别数据点。出于这个原因，我们使用该backgroundColor键为每个数据集分配了一种颜色。除了背景颜色，您还可以使用borderColor和borderWidth键更改图表的边框颜色和边框宽度。
您可能还注意到，我们在对象r内部使用了比例键，而不是像我们在折线图或条形图中所做的那样。这是因为这些类型的图表具有径向轴。以下演示显示了我们代码的最终结果。如您所见，现在很容易比较两个学生在不同科目中的表现。chartOptionsxy
您也可以使用borderDash键创建虚线边框而不是实线。这个键接受一个数组作为它的值。数组的第一个元素确定破折号的长度，第二个元素确定它们之间的间距。您还可以使用borderDashOffset键为绘制虚线提供偏移值。
您还可以使用pointBorderColor和pointBorderWidth键控制绘制点的边框颜色和宽度。同样，您也可以使用pointBackgroundColor键为不同的点设置背景颜色。可以使用pointRadius键指定绘制点的大小。您可以使用 键控制点应开始与鼠标交互的距离pointHitRadius。
pointHoverBackgroundColor您可以使用、pointHoverBorderColor和pointHoverBorderWidth键更改悬停时绘制点的外观。您需要记住的一件事是，这些悬停键不会等待您实际悬停在元素上才能触发。一旦您进入上面设置的命中半径范围内，更改就会生效。
有很多形状可用于绘制点。默认情况下它们是圆形的。但是，您可以将形状更改为triangle、rect、rectRounded、rectRot、cross、crossRot、star、line和dash。
让我们使用所有这些键重新绘制之前的雷达图。这是为数据集和比例提供配置选项的代码。
variable tag data = {
tags: ["English", "Mathematics", "Physics", "Chemistry", "Biology", "History"],
data set:[{
Labels: "Martha",
background-color: "transparent",
border color: "red",
padding: false,
point radius: 6,
Point Hit Radius: 12,
dot border width: 3,
point background color: "pink",
pointBorderColor: "Black",
Point Hover Radius: 10,
point style: "triangle",
Data: [65, 75, 70, 80, 60, 80]
}, {
tags: "Steven",
background-color: "transparent",
border color: "blue",
padding: false,
point radius: 6,
Point Hit Radius: 12,
dot border width: 3,
pointBackgroundColor: "Light Blue",
pointBorderColor: "Black",
Point Hover Radius: 10,
point style: "rectangle",
Data: [54, 65, 60, 70, 70, 75]
},
{
tags: "Harry",
background-color: "transparent",
border color: "green",
padding: false,
point radius: 6,
Point Hit Radius: 12,
dot border width: 3,
point background color: "light green",
pointBorderColor: "Black",
Point Hover Radius: 10,
point style: "circle",
Data: [84, 56, 75, 40, 90, 85]
}]};var chartOptions = {
plugin: {
title: {
display: true,
Text: "Comparing Student Performance",
position: "bottom"
},
legend: {
position: "bottom",
Label: {
padding: 30
}
}
},
scales:{
change:{
max: 100,
minutes: 30,
ticks: {
Step size: 15,
background-color: "orange",
white color"
},
grid: {
Colour: Black"
},
angle line: {
color: gray"
},
point label: {
font: {
Size: 20
}
}
}
}};在chartOptions对象内部，min和max值用于设置比例的最小值和最大值。该stepSize键可用于告诉 Chart.js 从min到应该采取的步骤数max。如下图所示，值从 90 变为 100，仅增加了 10。这是上述代码的最终结果。
创建极地区域图
极区图类似于饼图。这些图表之间的两个主要区别是，在极地区域图表中，所有扇区具有相等的角度，并且每个扇区的半径取决于绘制的值。这些图表用于绘制循环现象。例如，您可以使用它们来绘制一年中每个季节您所在地区特定物种的候鸟数量。
这些图表中每个扇区的半径与对应对象数量的平方根成正比。对于候鸟，半径将与您所在地区鸟类数量的平方根成正比。
您可以在 Chart.js 中通过将type键设置为polarArea. 这是创建极坐标图所需的基本代码。
var polarAreaChart = newChart(birdsCanvas, type: 'polarArea', data: bird data, options: chart options});
这是在极地图上绘制候鸟数量的代码。此时提供的唯一数据是不同季节的鸟类数量和背景颜色。
mutant bird data = {
tags: ["spring", "summer", "autumn", "winter"],
data set:[{
Data: [1200, 1700, 800, 200],
background color: [
"rgba(255, 0, 0, 0.5)",
"rgba(100, 255, 0, 0.5)",
"rgba(200, 50, 255, 0.5)",
"RGBA(0, 100, 255, 0.5)"
]
}]};var chartOptions = {
plugin: {
title: {
display: true,
alignment: "start",
Text: "Migratory Birds in Different Seasons"
},
legend: {
Alignment: "start"
}
}};var polarAreaChart = newChart(birdsCanvas,
type: 'polarArea',
data: bird data,
options: chart options});上面的代码将创建以下极区图。
极区图提供了设置backgroundColor、borderWidth、borderColor、hoverBackgroundColor、hoverBorderWidth和的常用选项hoverBorderColor。还有一些特定于极地图的键，您可以使用它们来自定义它们的外观。
例如，您可以使用startAngle键设置数据集中第一个值的起始角度。同样，每条弧线所对的角度可以使用angleinside 键指定arc。这个角度是自动计算的，它覆盖了整个 360° 区域。但是，您可以将其设置为您喜欢的任何值。
极区图中绘制的扇区默认是旋转和缩放的。animateScale您可以通过将键的值设置为 来防止缩放动画false。animateRotate同样，可以通过将键的值设置为 来关闭旋转动画false。这两个键都在 下可用animation。
下面的代码更改了几个键的值，以使图表更具视觉吸引力。
var chartOptions = {
plugin: {
title: {
display: true,
position: "bottom",
Text: "Migratory Birds in Different Seasons"
},
legend: {
Center Align",
position: "left",
Label: {
font: {
Size: 16
}
}
}
},
animation: {
animation rotation: false
},
scales:{
change:{
ticks: {
font: {
Size: 16,
},
white color",
Background color: "black"
}
},
},
element:{
arc:{
Angle: 180,
border color: "black"
}
}};除了旋转图表和禁用旋转动画外，我们还通过将值设置为positionto将图例移动到了图表的左侧left。这会在图表顶部留下足够的空间来正确显示它。
最后的想法
在本教程中，您了解了雷达和极地图的应用。之后，您学习了如何创建基本图表并使用 Chart.js 中提供的各种配置选项对其进行自定义。您将在本系列的下一部分中了解饼图、甜甜圈图和气泡图。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
