On the realization of data proportion Diagram

data percentage chart

what are the ideas for this realization?

Less sass javascript html5 css

Nov.15,2021

have fun. I use Chinese to save comments. I suggest that variables and method names be in English.

Example of

playable:
https://codepen.io/anon/pen/o.

Code:

var  = 68;
var  = 18;
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var canvas3 = document.getElementById("canvas3");

(30, canvas1);
(50, canvas2);
(70, canvas3);

function (, canvas) {
    canvas.height =  * 2;
    var ctx = canvas.getContext("2d");
    var  = canvas.width;
    var  =  - 1;
    var  =  + ;
    var  =  / ;
    var  = parseInt( *  / 100);
    var  = ();
    var  = "-sharpeee";

    for (var i = 0; i < ; iPP) {
        var  =  * 2 * i;
        if (i < .length) {
            ctx.fillStyle = [i];
            ctx.fillRect(, 10, , );
        } else {
            ctx.fillStyle = ;
            ctx.fillRect(, 10, , );
        }
    }
}

function (colorLevel) {
    var colors = [];
    // 
    var red = 255,
        green = 0,
        blue = 0;
    //255,200,0 :  green  200  200-0=200 
    var maxRed = 0,
        maxGreen = 200,
        maxBlue = 0;
    var level = colorLevel;
    while (level--) {
        colors.push("rgb(" + red + "," + green + "," + blue + ")");
        red += parseInt(maxRed / colorLevel);
        green += parseInt(maxGreen / colorLevel);
        blue += parseInt(maxBlue / colorLevel);
    }
    return colors;
}

<html>
<head>
    <style type="text/css">
    .bar {
        height: 1em;
        position: relative;
    }
    .base {
        height: 100%;
        background: linear-gradient(to right, rgba(196,196,196,1) 0, rgba(196,196,196,1) 5px, rgba(196,196,196,0) 5px,rgba(196,196,196,0) 10px) repeat;
        background-size: 10px 100%;
    }
    .percent {
        position: absolute;
        top:0;
        left:0;
        height: 100%;
        background: linear-gradient(to right, -sharpF00 0%, -sharpFF0 100%);
    }
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,0) 5px, rgba(255,255,255,1) 5px,rgba(255,255,255,1) 10px) repeat;
        background-size: 10px 100%;
    }
    </style>
</head>
<body>
<div class="bar">
    <div class="base"></div>
    <div class="percent"></div>
    <div class="mask"></div>
</div>
</body>
</html>

https://jsfiddle.net/4b8p7kst/5/
fillet is not easy to implement

Previous: Js code optimization

Next: Python implements to judge whether a number with a large number of digits is prime.