封装柱状图

最新推荐文章于 2024-05-29 14:57:32 发布

动心.

最新推荐文章于 2024-05-29 14:57:32 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/weixin_43893437/article/details/84953663

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="bar.js"></script>
<script>
    var obj = {
        id: "container",//必填
        width:500,//容器宽度
        height:300,//容器高度
        borderType:1,/*1:全包 2：半包  3：无边框*/
        borderColor:"red",
        title:"GDP分布",
        titleColor:"red",
        lineTipColor:"red",/*分割线的提示颜色*/
        lines:4,/*分割线数量*/
        lineColor:"red",
        barWidth:40,/*每个柱状图的宽度*/
        data: [    /*必填*/
            {
                label: "青岛",
                num: 270,
                color:"blue",
                labelColor:"blue"
            },
            {
                label: "烟台",
                num: 200,
                color:"red",
                labelColor:"red"
            },
            {
                label: "威海",
                num: 150,
                color:"orange",
                labelColor:"orange"
            }]
    };
    drawBar(obj);
</script>
</html>

引入的外部js是封装好的柱状图的js html文件中数据和id值是使用者必须要给的，其它的内容可以填写也可以不填（默认为封装js默认的样式），外部js在下面给出，

function drawBar(obj) {
    /*ctrl+f查找*/
    var id = obj.id;
    var width = obj.width || 500;//没有的话是默认500
    var height = obj.height || 300;
    var lineColor = obj.lineColor || "red";
    var lineTipColor = obj.lineTipColor || lineColor;
    var lines = obj.lines || 4;
    var title = obj.title || "";
    var titleColor = obj.titleColor || "red";
    var data = obj.data;
    var dataLength = data.length;
    var borderType = obj.borderType || 1;
    var borderColor = obj.borderColor || "red";
    var barWidth = obj.barWidth || 40;
    var container = document.getElementById(id);
    container.style.position = "relative";
    container.style.width = width + "px";
    container.style.height = height + "px";
    container.style.left = "50px";
    container.style.top = "50px";
    if (borderType === 1) {
        container.style.border = "1px solid " + borderColor;
    } else if (borderType === 2) {
        container.style.borderLeft = "1px solid " + borderColor;
        container.style.borderBottom = "1px solid " + borderColor;
    }
    var maxNum = 0;
    for (var i = 0; i < dataLength; i++) {
        if (data[i].num >= maxNum) {
            maxNum = data[i].num;
        }
    }
    maxNum = maxNum * 1.1;
    var perHeight = height / maxNum;
    var barSpace = (width - barWidth * dataLength) / (dataLength + 1);
    /*1px代表的数据大小*/
    /*柱状图*/
    for (var i = 0; i < dataLength; i++) {
        var label = document.createElement("div");
        label.innerText = data[i].label;
        label.style.cssText = "position:absolute;bottom:-21px;width:100%;text-align:center";
        label.style.color = data[i].labelColor;
        var subTitle = document.createElement("div");
        subTitle.innerText = data[i].num;
        subTitle.style.cssText = "width:100%;text-align:center;position:absolute;top:-21px";
        subTitle.style.color = data[i].labelColor;
        var div = document.createElement("div");
        div.className = "bar";
        div.style.cssText = "height:0px;position:absolute;bottom:0px;transition:all 3s";
        div.style.width = barWidth + "px";
        div.style.backgroundColor = data[i].color || "red";
        div.style.left = barSpace * (i + 1) + (barWidth * i) + "px";
        div.appendChild(label);
        div.appendChild(subTitle);
        container.appendChild(div);
    }
    /*画线*/
    var lineSpace = height / (lines + 1);
    for (var i = 0; i < lines; i++) {
        var line = document.createElement("div");
        line.style.cssText = "height:1px;width:100%;position:absolute;z-index:-1";
        line.style.backgroundColor = lineColor;
        line.style.bottom = lineSpace * (i + 1) + "px";
        container.appendChild(line);
    }
    /*画lineTip*/
    var tipNumSpace = maxNum / (lines + 1);
    for (var i = 0; i < lines + 2; i++) {
        var tip = document.createElement("div");
        tip.style.cssText = "position:absolute;left:-45px;width:40px;text-align:center;transform:rotate(60deg)";
        tip.style.bottom = (lineSpace * i - 8) + "px";
        tip.style.color = lineTipColor;
        tip.innerText = Math.round(tipNumSpace * i * 100) / 100;
        /*保留小数点后两位*/
        container.appendChild(tip);
    }
    /*添加过渡效果*/
    var bars = document.getElementsByClassName("bar");
    setTimeout(function () {
        for (var i = 0; i < dataLength; i++) {
            bars[i].style.height = data[i].num * perHeight + "px";
        }
    }, 500);

    var titleT = document.createElement("div");
    titleT.innerHTML = title;
    titleT.style.cssText = "position:absolute;right:0px;top:-30px";
    titleT.style.color = titleColor;
    container.appendChild(titleT);
}

动心.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装柱状图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;柱状图&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quo
复制链接

扫一扫