js canvas绘制芝麻信用仪表盘及雷达图效果代码-html代码-BFW代码库

js canvas绘制芝麻信用仪表盘及雷达图效果代码

代码语言：html

所属分类：图表

代码描述：js canvas绘制芝麻信用仪表盘及雷达图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<script>
    var Radar = (function(){

    var options = {

        styles: {
            offset: {
                top: 15,
                left: 0
            },
            border: {
                width: 2,
                color: '#2EC8CA'
            },
            splitLine: {
                color: '#ccc'
            },
            title: {
                font: 'bold 52px Microsoft YaHei',
                color: '#F56948'
            },
            valueRange: {
                border: {
                    width: 4,
                    color: '#FF0101'
                },
                background: '#F56948',
                arrow: 2
            },
            inner: {
                radius: 70,
                background: '#fff'
            },
            label: {
                image: '',
                font: '16px Microsoft YaHei',
                color: '#666'
            }
        }
    };

    var element,
        styles,
        borderStyle,
        splitLineStyle,
        titleStyle,
        valueRangeStyle,
        innerStyle,
        labelStyle;
    
    var extend = function(obj1, obj2){
        for(var k in obj2) {
            if(obj1.hasOwnProperty(k) && typeof obj1[k] == 'object') {
                extend(obj1[k], obj2[k]);
            } else {
                obj1[k] = obj2[k];
            }
        }
    }

    var calcLocation = function(cp, r, end){

        return {
            x: cp[0] + r * Math.cos(Math.PI * end),
            y: cp[1] + r * Math.sin(Math.PI * end)
        };
    }

    var drawLine = function(line) {
        var lines = line.lines;
        context.beginPath();
        context.moveTo(lines[0].x, lines[0].y);

        for(var i = 1; i < lines.length; i++){
            context.lineTo(lines[i].x, lines[i].y);
        }
        
        context.closePath();

        if(line.style) {
            context.strokeStyle = line.style;
            context.lineWidth = line.width || 1;
            context.stroke();
        }

        if(line.fill) {
            context.fillStyle = line.fill;
            context.fill();
        }
    }

    var fillText = function(opts){
        context.font = opts.font; 
        context.fillStyle = opts.color;
        context.textAlign = opts.align || 'center';
        context.textBaseline = opts.vertical || 'middle';  
        context.moveTo(opts.x, opts.y);  
        context.fillText(opts.text, opts.x, opts.y); 
    }

    var drawIcon = function(borderLoc, polar) {

        var img = new Image();
        img.src = labelStyle.image;
        img.onload = function(){
            for(var n = 0; n < borderLoc.length; n++){
                var text = polar[n].text,
                    icon = polar[n].icon,
                    loc = borderLoc[n],
                    x = loc.x + icon.l,
                    y = loc.y + icon.t;

                context.drawImage(img, icon.sx, icon.sy, icon.w, icon.h, x, y, icon.w, icon.h);

                fillText({
                    font: labelStyle.font,
                    color: labelStyle.color,
                    text: text,
                    x: x + icon.w/2,
                    y: y + icon.h + 10
                });
            }
        }
    }

    var drawInner = function(cp, valueRangeLoc, borderLoc, innerLoc, valueSum) {
        drawLine({
            lines: borderLoc,
            style: borderStyle.color,
            width: borderStyle.width
        });

        drawLine({
            lines: valueRangeLoc,
            style: valueRangeStyle.border.color,
            width: valueRangeStyle.border.width,
            fill: valueRangeStyle.background
        });

        for(var j = 0; j < borderLoc.length; j++){
            drawLine({
                lines: [{x: cp[0], y: cp[1]}, borderLoc[j]],
                style: splitLineStyle.color
            });
        }

        drawLine({
            lines: innerLoc,
            fill: innerStyle.background
        }); 

        fillText({
            font: titleStyle.font,
            color: titleStyle.color,
            text: options.title.replace('{v}', valueSum),
            x: cp[0],
            y: cp[1]
        });

        for (var k = valueRangeLoc.length - 1; k >= 0; k--) {
            var x = valueRangeLoc[k].x,
                y = valueRangeLoc[k].y;

            con.........完整代码请登录后点击上方下载按钮下载查看