数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area——（极地图）
极地面积图类似于饼图，但每个线段具有相同的角度 - 线段的半径因值而异。当我们想要显示类似于饼图的比较数据，同时也要显示上下文的值的范围时通常使用这种类型的图表。
官方文档：https://www.chartjs.org/docs/latest/charts/polar.html
示例用法
new Chart(ctx, {
data: data,
type: “polarArea”,
options: options
});
图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 在图例和工具提示中要显示数据集的标签 | String | ‘’ |
| backgroundColor | 弧背景色。 | Color | ‘rgba(0, 0, 0, 0.1)’ |
| borderColor | 弧形边框颜色。 | Color | ‘rgba(0, 0, 0, 0.1)’ |
| borderWidth | 弧形边框宽度（以像素为单位）。 | number | 2 |
| hoverBackgroundColor | 悬停时的弧形背景颜色。 | Color | undefined |
| hoverBorderColor | 悬停时的弧形边框颜色。 | Color | undefined |
| startAngle | 为数据集中的第一项绘制圆弧的起始角度。 | number | -0.5 * Math.PI |
| animation.animateRotate | 是否。使用旋转动画进行动画。 | boolean | true |
| animation.animateScale | 使图表从中心向外缩放。 | boolean | false |
相关属性详解
startAngle 为数据集中的第一项绘制圆弧的起始角度。默认值为-0.5 * Math.PI
let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {type: 'polarArea',data: data,options: {startAngle:-0.5 * Math.PI,//默认值}
});
let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {type: 'polarArea',data: data,options: {startAngle:1 * Math.PI,//默认值}
});
拓展
极地图也可以像雷达图一样设置图表的最大最小值范围：
options = {scale: {ticks: {suggestedMin: 0,suggestedMax: 30，}}
};
数据可视化清新版【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—数据更新
数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)相关推荐
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
- 前端开发之vue可视化数据图表组件（Chart.js）
前端开发之vue可视化数据图表组件(Chart.js) 前言 制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...
- Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目 生成的 ...
- node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染 文章目录 node.js 学习笔记(二)模板引擎和C/S渲染 一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
- Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
- node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端 一: 全局对象 Node. ...
- Vue.js 学习笔记 十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
- Vue.js 学习笔记 七 控制样式
Vue.js可以灵活的控制样式 我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
最新文章
- 一文带你搞懂 MySQL 分区！
- ndarray维度认识及np.concatenate函数详解
- Flex TextInput只允许输入数字等字符及字符数限制
- OpenCart之商品管理教程
- python数字字符是什么_大佬们，想问一下Python中特殊字符的代码是什么啊，只知道数字是digits...
- lua脚本在redis集群中执行报错--Lua script attempted to access a non local key in a cluster node...
- asp.net下向数据库存储和读取图片示例
- C#文件操作基础之File类和FileInfo类
- javascript基础修炼（1）——一道十面埋伏的原型链面试题
- Suowei的ajax
- 大数据-实验2 熟悉常用的HDFS操作
- 保护系统 用SVS为Windows穿上“层层”防弹衣
- 仿淘手游交易平台网站源码
- 【基础篇】Navicat让MySQL数据库可视化
- 层次分析法(AHP)介绍
- MySQL必知必会——数据库基础知识和MySQL基本使用
- bzoj2959 长跑 LCT+并查集
- uni-app 布局遇到的问题
- 基于采样的路径规划算法RRT和代码实现
- 微信公众号使用：微信公众平台企业号一次发布多条图文消息的方法