一个简单的柱状图组件的封装（JS）

最新推荐文章于 2024-05-18 15:30:10 发布

小栗子的普

最新推荐文章于 2024-05-18 15:30:10 发布

阅读量563

点赞数

分类专栏： JS 文章标签：插件

本文链接：https://blog.csdn.net/weixin_43885459/article/details/84964132

版权

JS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

代码如下：
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js柱状图</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

JS代码如下

<script src="JRchart.js"></script>
<script>
    var obj = {
        width:500,//容器的宽度
        height:300,//容器的高度
        id: "container",//容器（必填）
        title:"山东GDP详情",//标题
        titleColor:"green",//标题颜色
        line:4,//分隔线的数量
        borderType:1, //1：全包，四周都有边框  2：半包，类似坐标轴  3：没有边框
        borderColor:"red",//边框颜色
        lineColor:"purple",//分隔线颜色
        lineTipColor:"purple",//分割线标签颜色
        barWidth:"40",
        data: [//源数据
            {
                name: "威海",
                num: 100,
                color:"blue"
            },

            {
                name: "青岛",
                num: 280,
                color:"yellow"
            },
            {
                name: "烟台",
                num: 150,
                color:"pink"
            },
            {
                name: "潍坊",
                num: 80,
                color:"#555"
            }

            ]
    };
       drawBar(obj);
</script>

引入名叫JRchart的js文件

function drawBar(obj) {
    var id = obj.id;
    var width = obj.width || 500;//  用户定义好的或者默认的
    var height = obj.height || 300;
    var borderType = obj.borderType || 1;
    var borderColor = obj.borderColor || "red";
    var title = obj.title || "";
    var line = obj.line || 4;
    var data = obj.data;
    var barWidth = obj.barWidth;
    var titleColor = obj.titleColor;
    var lineColor = obj.lineColor;
    var lineTipColor = obj.lineTipColor;
    var container = document.getElementById(id);
    container.style.position = "relative";
    container.style.width = width + "px";
    container.style.height = height + "px";
    container.style.top = "100px";
    container.style.left = "200px";
    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 dataLength = data.length;
    //获取源数据中num的最大值
    var maxNum = 0;
    for (var m = 0; m < dataLength; m++) {
        if (maxNum <= data[m].num) {
            maxNum = data[m].num;
        }
    }
    //画柱状图
    maxNum = maxNum * 1.1;
    var perHeight = height / maxNum;//每个px所代表的高度
    var barSpace = (width - barWidth * dataLength) / (dataLength + 1);
    for (var i = 0; i < dataLength; i++) {
        var div = document.createElement("div");
        var names = document.createElement("div");
        names.innerText = data[i].name;
        names.style.width = barWidth + "px";
        names.style.position = "absolute";
        names.style.bottom = "-21px";
        names.style.color = data[i].color;
        div.appendChild(names);
        var labels = document.createElement("div");
        labels.innerText = data[i].num;
        labels.style.width = barWidth + "px";
        labels.style.position = "absolute";
        labels.style.top = "-21px";
        labels.style.color = "red";
        div.appendChild(labels);
        div.style.height = "0px";
        div.style.width = barWidth + "px";
        div.style.position = "absolute";
        div.style.bottom = "0px";
        div.style.backgroundColor = data[i].color;
        div.style.textAlign = "center";
        div.style.transition = "all  3s";
        div.style.left = barSpace * (i + 1) + (barWidth * i) + "px";
        div.className = "bar";
        container.appendChild(div);
    }
    //画线
    var lineSpace = height / (line + 1);
    for (var j = 0; j < line; j++) {
        var lines = document.createElement("div");
        lines.style.width = "100%";
        lines.style.height = "1px";
        lines.style.position = "absolute";
        lines.style.bottom = lineSpace * (j + 1) + "px";
        lines.style.backgroundColor = lineColor;
        container.appendChild(lines);
        lines.style.zIndex = "-1";

    }
    //分隔线的提示
    var tipNumSpace = maxNum/(line+1);
    for (var k = 1; k <= line + 1; k++) {
        var tips = document.createElement("div");
        tips.innerText = Math.round(tipNumSpace*k*10)/100 ;
        tips.style.width = "50px";
        tips.style.position = "absolute";
        tips.style.bottom = (lineSpace * k-8) + "px";
        tips.style.left = "-50px";
        tips.style.transform = "rotate(60deg)";
        tips.style.color = lineTipColor;
        container.appendChild(tips);


    }
    //标题
    var titles = document.createElement("div");
    titles.style.width = "100px";
    titles.style.position = "absolute";
    titles.style.top = "-40px";
    titles.style.left = "400px";
    titles.style.color = titleColor;
    titles.innerText = title;
    container.appendChild(titles);

    //过渡效果
    var bar = document.getElementsByClassName("bar");
    setTimeout(function () {
        for(var i=0;i<dataLength;i++){
            bar[i].style.height=data[i].num * perHeight + "px";
        }
    },600);
}

结果如下
在这里插入图片描述

小栗子的普

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个简单的柱状图组件的封装（JS）

代码如下：html代码：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Js柱状图&amp;lt;/
复制链接

扫一扫