数据可视化清新版【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—数据更新