当前位置：文江博客话题详情

JavaScript CSS HTML5 LESS SASS

关于数据占比图的实现

发布于 2022-09-11 15:20:20 字数 178 浏览 35 评论 0

数据占比图

这种实现，有什么思路？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

稍尽春風 2022-09-18 15:20:20

https://jsfiddle.net/4b8p7kst/5/
圆角不太好实现

找个人就嫁了吧 2022-09-18 15:20:20

<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, #F00 0%, #FF0 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>

染年凉城似染瑾 2022-09-18 15:20:20

好好玩，我是为了省注释才用中文，建议变量和方法名用英文哦。

可以玩的例子：
https://codepen.io/anon/pen/o...

代码：

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 默认颜色 = "#eee";

    for (var i = 0; i < 总条数; i++) {
        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;
}

~没有更多了~

关于作者

一桥轻雨一伞开

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

謌踐踏愛綪

文章 0 评论 0

开始看清了

文章 0 评论 0

高速公鹿

文章 0 评论 0

alipaysp_PLnULTzf66

文章 0 评论 0

热情消退

文章 0 评论 0

白色月光

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文