chart.js使用学习——雷达图

  雷达图以二维形式综合对比多组数据的差异，常用于比较2组或更多组数据集[1]。chart.js中雷达图的数据准备与其它图形相同，主要差异在于创建chart对象时，图形类型需指定为“radar”。

基本用法

  如下列代码及效果图所示，创建雷达图主要是在Chart类构造函数中指定type为radar即可。从图形效果来看，雷达图更适合综合比较数据量不大、数据类型不多的数据集，例如综合比较不同球员的指标（速度、力量、进球数等等）。如果数据量很大，用其它图形可能更适合。

	const labels = months({
    
    count: 7});
        const data = {
    
    
        labels: labels,
        datasets: [{
    
    
            label: '雷达图1',
            data: [65, 59, 80, 81, 56, 55, 40],
            borderColor: 'rgb(75, 192, 192)'
        },
        {
    
    
            label: '雷达图2',
            data: [85, 79, 100, 101, 76, 75, 60],
            borderColor: 'rgb(175, 92, 92)'
        }]
        };
        
        var barChart = new Chart(ctx, {
    
    
            type: 'radar',
            data: data
            });

常用属性

  雷达图中的常用属性与折线图相同，没有什么特别的属性，在此仅列出常用属性及简要说明。

属性名称	简要说明	默认值
backgroundColor	设置数据集的填充背景色	rgba(0, 0, 0, 0.1)
borderCapStyle	设置边框线线端点的形状	butt
borderColor	设置边框线颜色	rgba(0, 0, 0, 0.1)
borderDash	用于设置边框线中的短划线模式	[]
borderDashOffset	设置绘制边框线中的短划线时的偏移量	0
borderJoinStyle	设置线与线连接处的形状	miter
borderWidth	设置边框线的线宽	3
fill	是否填充边框线内部区域	false
order	设置数据集的绘制顺序	0
tension	设置线段平滑度	0
pointStyle	设置边框线上点的形状	circle

参考文献：
[1]https://baike.baidu.com/item/%E9%9B%B7%E8%BE%BE%E5%9B%BE/3587592?fr=aladdin
[2]https://www.chartjs.org/docs/latest/charts/radar.html
[3]https://chartjs.bootcss.com/docs/charts/radar.html
[4]https://blog.csdn.net/qq_43592352/article/details/106752638