数据可视化清新版【chart.js】学习笔记5.0—雷达图(Radar)

最新推荐文章于 2024-06-28 10:54:54 发布
最新推荐文章于 2024-06-28 10:54:54 发布
阅读量2.1k 收藏 9
点赞数 1
分类专栏： 数据可视化 前端编程 文章标签： javascript 前端 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36288559/article/details/112317273
版权

Radar——（雷达图）

雷达图是显示多个数据点和它们之间的差异的一种方式，通常用于比较两个或更多不同数据集的点。
官方文档：https://www.chartjs.org/docs/latest/charts/radar.html

用法示例
var myRadarChart = new Chart(ctx, {
type: ‘radar’,
data: data,
options: options
});
在这里插入图片描述

图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）

属性描述类型默认值
label图例和工具提示中显示的数据集标签。String‘’
pointBackgroundColor点的填充颜色。Color‘rgba(0, 0, 0, 0.1)’
pointBorderColor点的边框颜色。Color‘rgba(0, 0, 0, 0.1)’
pointBorderWidth点边框的宽度（以像素为单位）。number1
pointRadius点形状的半径。如果设置为0，则不渲染该点。number3
pointStyle数据点样式string/Image‘circle’
backgroundColor线条填充颜色。Color‘rgba(0, 0, 0, 0.1)’
borderColor线条颜色。Color‘rgba(0, 0, 0, 0.1)’
borderWidth线宽（以像素为单位）。number3
fill如何填充线下区域。boolean/stringtrue
lineTension贝塞尔曲线的线张力。设置为0以绘制直线。number0
spanGaps是否断层连接booleanundefined
pointHoverBackgroundColor悬停时点背景色。Colorundefined
pointHoverBorderColor悬停时点边框的颜色。Colorundefined
pointHoverBorderWidth悬停时点的边框宽度。number1
pointHoverRadius悬停时点的半径。number4

相关属性详解

pointRadius 点形状的半径。如果设置为0，则不渲染该点。

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, 20, 5, 2,10],
                     pointRadius:0,
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, 20, 5, 2,10],
                     pointRadius:5,
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

pointStyle 数据点风格，拥有：‘circle’，‘cross’，‘crossRot’，‘dash’.，‘line’，‘rect’，rectRounded’，‘rectRot’，‘star’，'triangle’等选项。

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, 20, 5, 2,10],
                     pointStyle:'circle',//默认为圆形
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, 20, 5, 2,10],
                     pointStyle:'rectRot',//默认为圆形
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

fill 线下填充方式，默认开启。

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, 20, 5, 2,10],
                     fill:true,//默认开启
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, 20, 5, 2,10],
                     fill:false,
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

spanGaps 设置开启当数据中存在空值如undefined,null,NaN,’'是空值左右两点会进行连接，反之不开启，会出现断层。

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, undefined, 5, 2,10],
                     spanGaps:true,
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                     label: '# of Votes',
                     data: [12, 19, undefined, 5, 2,10],
                     spanGaps:false,
                     backgroundColor:backgroundColor,
                     borderColor:borderColor,
                     borderWidth: 1
                     }]
           },
   options:options
});

在这里插入图片描述

拓展

1-多雷达图
在这里插入图片描述

let ctx = document.getElementById("myChart4");
let myChart = new Chart(ctx, {
    type: 'radar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
          		{//紫雷达
                     label: '# of Votes',
                     data: [18,12,5,12,4,17],
                     backgroundColor:backgroundColor1,
                     borderColor:borderColor1,
                     borderWidth: 1
          		}，
          		{//黄雷达
                     label: '# of Votes',
                     data: [3,6,9,15,18,19],
                     backgroundColor:backgroundColor2,
                     borderColor:borderColor2,
                     borderWidth: 1
          		}，
          		{//青雷达
                     label: '# of Votes',
                     data: [16,12,20,12,19,7],
                     backgroundColor:backgroundColor3,
                     borderColor:borderColor3,
                     borderWidth: 1
          		}，
          ]
          },
   options:options
});

2-雷达图仅支持单个刻度。该比例的选项在scale属性中定义。此比例尺的选项在scale属性中定义，可以从“线性径向轴”页面引用。

options = {
    scale: {
        angleLines: {
            display: false
        },
    }
};

3-对于一个雷达图来说如果不定最大值和最小值那不同数据的雷达图范围是不同的，默认最小是数据中最小值或者最小值-1（奇数），最大为数据中最大值或者最大数+1（奇数）。
data: [16,12,20,12,19,7]，上面的青雷达，数据最大为20，最小为7，雷达图最大为20，最小为6，如下图。
在这里插入图片描述

data: [3,6,9,15,18,19]，上面的黄雷达，数据最大为19，最小为3，雷达图最大为20，最小为2，如下图。

在这里插入图片描述
data: [18,12,5,12,4,17]，上面的紫雷达，数据最大为18，最小为4，雷达图最大为18，最小为4，如下图。
在这里插入图片描述
可以发现这和之前的多雷达图显示完全不一样，就是因为设置了固定的雷达图最大最小值，那么该怎么设置呢，如代码：

那么我们怎么配置让雷达图拥有相同范围呢，代码如下：即可完成效果。

options = {
    scale: {
        ticks: {
            suggestedMin: 0,
            suggestedMax: 20，
        }
    }
};

在这里插入图片描述

数据可视化清新版【chart.js】学习笔记

01.数据可视化清新版【chart.js】学习笔记1.0—介绍
02.数据可视化清新版【chart.js】学习笔记2.0—项目引入
03.数据可视化清新版【chart.js】学习笔记3.0—折线图（Line）
04.数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)
05.数据可视化清新版【chart.js】学习笔记5.0—雷达图(Radar)
06.数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)
07.数据可视化清新版【chart.js】学习笔记7.0—环形图(Doughnut )
08.数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
09.数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)
10.数据可视化清新版【chart.js】学习笔记10.0—离散图(Scatter Chart)
11.数据可视化清新版【chart.js】学习笔记11.0—混合图表
12.数据可视化清新版【chart.js】学习笔记12.0—面积图表
13.数据可视化清新版【chart.js】学习笔记13.0—图表配置
14.数据可视化清新版【chart.js】学习笔记14.0—数据更新

LIMI_伞梦
关注
专栏目录
Chart.js 雷达图
wjs2024的博客
08-23 457
雷达图，也称为网络图或星图，是一种以多边形形式展示多变量数据的图表。每个轴代表一个变量，轴的长度通常是量化的，所有的轴都从同一个中心点开始，形成一个闭环。雷达图非常适合展示多个量化指标，比如技能、能力或者多个维度的性能评估。Chart.js 是一个流行的开源JavaScript图表库，它支持包括雷达图在内的多种图表类型。
d3.js 绘制雷达图
05-16
利用d3,js将数据可视化，可以做到数据与代码的分离，方便以后修改数据。 这次利用d3.js绘制了一个五维的雷达图，即将多个对象的五种属性在一张图上对比。 数据写入data.csv、数据类型写入type.csv文件。
使用Chart.js来显示雷达图
cybozu的博客
10-24 1070
今天介绍一下如何使用自定义。比如在打开低代码应用的记录详情页面时，如何用雷达图来显示成绩单。※是JavaScript库，除了雷达图，还可创建饼图、折线图、柱形图。
chart.js使用学习——雷达图
gc_2299的博客
09-25 1781
介绍chart.js中雷达图的基本用法及常用属性
Chart.js-雷达图分析（参数分析+例图）
十一月廿七风雨大作
06-15 2403
Chart.js-雷达图分析（参数分析+例图）雷达图样式总览基本写法参数解析 雷达图样式总览 基本写法 首先在< script >标签里面引入chart.js： <script src="chart.js/Chart.js"></script> 然后创建一个画布： <canvas id="myChart" width="400" height="400"></canvas> 最后写js代码： var ctx = $('#myChart');
在ASP.NET中使用Chart.js的可视数据
04-05
总的来说，在ASP.NET中使用Chart.js进行数据可视化，需要完成以下步骤：引入Chart.js库，从数据库获取数据，将数据传递给客户端，然后在JavaScript中利用这些数据创建图表。这个过程涉及到了C#的服务器端编程和...
smartchart数据可视化平台 v6.0.zip
04-02
"SmartChart数据可视化平台v6.0"是一个专为数据分析师和业务决策者设计的工具，它通过图形化界面帮助用户将复杂的数据转化为易于理解的图表和仪表盘。这款软件工具的核心价值在于其强大的数据处理能力和丰富的可视化...
python爬虫数据可视化分析大作业.zip
06-12
在本项目中，"python爬虫数据可视化分析大作业.zip" 是一个综合性的学习资源，主要涉及了Python编程中的两个重要领域：网络爬虫（Web Scraping）和数据可视化（Data Visualization）。通过这个作业，我们可以深入...
数据可视化--Chart.js使用总结
weixin_45846980的博客
04-11 1042
概述 Chart.js是一个HTML5图表库使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式 ##中文官网 http://chartjs.cn/ ##官网 https://www.chartjs.org/ ##GitHub网址 https://github.com/chartjs/Chart.js ...
echart5.0附带china.js可以写地图的包
05-25
3. **更丰富的图表类型**：ECharts 5.0 增加了一些新的图表类型，如树图（Tree）和力导向图（Graph），以及对既有图表类型的扩展，如雷达图（Radar）的多层支持。 4. **更强大的地图支持**：除了 `china.js`，...
Chart.bundle.js雷达图代码
09-13
雷达图 Chart.bundle.js
AngularJS 自定义指令 - ECharts 2 雷达图
09-24
使用AngularJS自定义指令对 ECharts 2 的雷达图进行封装，以便在项目中可以重复调用。
雷达图生成插件原生JS
08-10
雷达图生成插件。（原生JS）
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图实例
06-22
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图，很实用，html页面打开就能看效果，在example文件夹下，原网页是 https://github.com/chartjs/Chart.js可自行下载
wxchart微信小程序图表组件柱状图折线图饼图雷达图
08-10
wxchart 微信小程序，图表组件（柱状图、折线图、饼图、雷达图...）
Chart.js中文文档-雷达图
weixin_30386713的博客
03-24 437
雷达图或蛛网图（Radar chart） 简介 A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets 使用案...
html+css+js做的雷达图
最新发布
w11111xxxl的博客
06-28 527
/ 框架线稍微长一些。// 根据值缩放半径。// 每个轴之间的角度差。// 雷达图的中心 X 坐标。// 雷达图的中心 Y 坐标。// 如果不是第一个点，则绘制线条到上一个点。// 更新上一个点和角度以供下一次迭代使用。// 连接最后一个点到第一个点以完成雷达图。// 绘制当前点的圆点。// 绘制六边形的框架。// 绘制雷达图的线条。
chartjs 王者荣耀能力雷达图怎么做
txcy008的博客
10-28 4202
效果图 代码如下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值