原生js自定义雷达图(原创)

查看演示立即下载

插件描述：自定义的雷达图,轻量级可根据数据变化做出相应变化，颜色、尺寸、背景可自定义

更新时间：2021-08-06 01:50:10

数据格式如下

var data = [{
    name: "标题一",
    value: 50,
    startVal: 0
}, {
    name: "标题二",
    value: 50,
    startVal: 0
}, {
    name: "标题三",
    value: 70,
    startVal: 0
}, {
    name: "标题四",
    value: 25,
    startVal: 0
}, {
    name: "标题五",
    value: 33,
    startVal: 0
}, {
    name: "标题六",
    value: 55,
    startVal: 0
}, {
    name: "标题七",
    value: 33,
    startVal: 0
}];
var radar = new Radar({
    el: "#myCanvas", //canvas标签的id        
    data: data,
    size: 80, //雷达图的大小    
});

根据以下方法对背景自定义（可不执行）：

radar.customizeBackground({
    rect: [{
        color: "rgba(56,60,63,0.4)",
        size: 80,
    }, {
        color: "rgba(115,115,116,0.3)",
        size: 75,
    }, ],
    circle: [{
        color: "rgba(66,139,234,0.1)",
        size: 4
    }, {
        color: "rgba(66,139,234,1)",
        size: 2
    }]
})

自定义文字样式（可不执行）

radar.setFontStyle({
    style: "12px Arial",
    color: "rgba(200,255,255,1)"
})

设置canvas尺寸（必须执行）

1	`radar.setContextSize(300, 250);`

初始化（必须执行）

1	`radar.init();`

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： skuTable 动态生成sku表（原创）
下一个特效： jQuery音乐播放器插件QPlayer