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

  雷达图以二维形式综合对比多组数据的差异,常用于比较2组或更多组数据集[1]。chart.js中雷达图的数据准备与其它图形相同,主要差异在于创建chart对象时,图形类型需指定为“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
经验分享 程序员 微信小程序 职场和发展