data percentage chart
what are the ideas for this realization?
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.