自定义一个canvas柱状图demo

作者: Pale_Eyes | 来源:发表于2017-10-11 11:27 被阅读0次

自定义一个canvas柱状图demo
完全自定义控件-简单环形进度条制作
完全自定义控件-适配屏幕（好麻烦）的饼图控件
canvas图表(1) - 柱状图
canvas模拟实现磁盘调度算法
2019-03-21
一起来演示Android画布
可视化音频信号波形
matplotlib_bar
HTML5开发之canvas实现元素图片镜像翻转动画效果的方法

一、html

html本身很简单，就是引入jquery和自己写的一个js，调用一下自己写的js的一个方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas柱状图demo</title>
    <!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
    <script src="jquery-2.0.3.min.js"></script>
    <script src="drawCanvas.js"></script>
</head>
<body id="body">
</body>
<script>
    showResult();
</script>
</html>

二、drawCanvas.js

这里我写的有点复杂，考虑适配了。有时间来重新优化一下这里的代码，至少有点可读性吧。

function showResult(info){
        //console.log(info);
        //console.log(JSON.parse(info));
        info = '[{"selectName":"A","selectNum":3,"isRight":0},{"selectName":"A","selectNum":13,"isRight":0},{"selectName":"B","selectNum":28,"isRight":1}]';
        var results = JSON.parse(info);
        var selectNum = results.length;
        var maxNum = 0;
        for(var i =0;i<results.length;i++){
            console.log(maxNum+"/"+results[i].selectNum);
            if(maxNum < parseInt(results[i].selectNum)){
                maxNum = parseInt(results[i].selectNum);
            }
        }
        var maxLineNum = Math.ceil(maxNum/5)*5;
        var xPlus = 0.9/(selectNum+1);
        var xStart = xPlus;
        var yStart = 0.9;

        var lineColor = "#e5e5e5";
        var rightRecColor = '#3dc600';
        var wrongRecColor = '#f65e5e';
        var xyFontColor = "#aaaaaa";//#999999不好看
        var selectFontColor = "#666666";

        var cw = document.documentElement.clientWidth;
        var ch = document.documentElement.clientHeight;
        var fontSize = cw/54;//54 
        var fontAndSize = fontSize + "px Arial";
        var rect_w = cw/12;//120
        $("body").append('<canvas id="js-test-result" width="'+cw+'" height="'+ ch +'"></canvas>');
//        $("#js-test-result").css("width",cw);
//        $("#js-test-result").css("height",ch);
        $("#js-test-result").css("background","#ffffff");
        var resultCanvas = document.getElementById("js-test-result");
        var rcxt = resultCanvas.getContext("2d");
        rcxt.clearRect(0,0,cw,ch);
        $("#js-test-result").show();
        var num = 35;
        //x轴 及其平行轴
        for(var i =1;i< 9;i++){
            rcxt.strokeStyle= lineColor;
            rcxt.beginPath();
            rcxt.moveTo(cw*0.1,ch*(i*0.1+0.1));
            rcxt.lineTo(cw*0.9,ch*(i*0.1+0.1));
            rcxt.closePath();
            rcxt.stroke();
            //画选项
            rcxt.font=fontAndSize;
            rcxt.fillStyle = selectFontColor;
            if(num<10){
                //rcxt.fillText(" "+num,cw*0.1-fontSize*2,ch*(i*0.1+0.1));
            }else{
                //rcxt.fillText(num,cw*0.1-fontSize*2,ch*(i*0.1+0.1));
            }

            num=num-5;
        }
        //y轴
        rcxt.strokeStyle= lineColor;
        rcxt.beginPath();
        rcxt.moveTo(cw*0.1,ch*0.9);
        rcxt.lineTo(cw*0.1,ch*0.1);
        rcxt.closePath();
        rcxt.stroke();



        // 画方块
        for (var i =0;i<selectNum;i++){
            var result = results[i];
            if(result.isRight == 1){
                rcxt.fillStyle = rightRecColor;
            }else{
                rcxt.fillStyle = wrongRecColor;
            }
            var recH = ch*0.8*result.selectNum/maxLineNum;
            console.log(result.selectNum+"/"+maxLineNum);
            rcxt.fillRect(cw*(xStart+i*xPlus),ch*yStart-recH,rect_w,recH);//(x,y,width,height);
            //画选项
            rcxt.font=fontAndSize;
            rcxt.fillStyle = selectFontColor;
            rcxt.fillText(result.selectName + "选项 ("+result.selectNum+"人)",cw*(xStart+(i-0.03)*xPlus),ch*yStart+fontSize);
        }

        //画正确标识
        rcxt.fillStyle = rightRecColor;
        rcxt.fillRect(cw*0.8-1.2*fontSize,ch*0.1-1.6*fontSize,fontSize,fontSize/2);//(x,y,width,height);
        rcxt.font=fontAndSize;
        rcxt.fillStyle = xyFontColor;
        rcxt.fillText("正确答案",cw*0.8,ch*0.1-fontSize);

        //画正确标识
        rcxt.fillStyle = wrongRecColor;
        rcxt.fillRect(cw*0.9-1.2*fontSize,ch*0.1-1.6*fontSize,fontSize,fontSize/2);//(x,y,width,height);
        rcxt.font=fontAndSize;
        rcxt.fillStyle = xyFontColor;
        rcxt.fillText("错误答案",cw*0.9,ch*0.1-fontSize);
    }

效果：

效果图