利用javascript写条形图形

最新推荐文章于 2023-08-17 17:50:17 发布

yangna01314

最新推荐文章于 2023-08-17 17:50:17 发布

阅读量736

点赞数

分类专栏： javascript 文章标签： javascript xhtml 图形 html function div

本文链接：https://blog.csdn.net/yangna01314/article/details/5404672

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

其实javascript写条形图形，其实际上是对样式CSS的控制。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        function markbarchar(data, width, height, color) {
            if (!width) width = 500;
            if (!height) height = 300;
            if (!color) color = 'blue';
            width = width - 22;
            height = height - 22;

            var chart = document.createElement("div");
            chart.style.position = "relative";
            chart.style.width = width + "px";
            chart.style.height = height + "px";
            chart.style.border = "1px solid black";
            chart.style.paddingLeft = "10px";
            chart.style.paddingRight = "10px";
            chart.style.paddingTop = "10px";
            chart.style.paddingBottom = "0px";
            chart.style.backgroungColor = "white";

            var barwidth = Math.floor(width / data.length);
            var maxdata = Math.max.apply(this, data);
            var scale = height / maxdata;

            for (var i = 0; i < data.length; i++) {
                var bar = document.createElement("div");
                var barheight = scale * data[i];
                bar.style.position = "absolute";
                bar.style.left = (barwidth * i + 1 + 10) + "px";
                bar.style.top = height - barheight + 10 + "px";
                bar.style.border = " solid red 1px";
                bar.style.width = (barwidth - 2) + "px";
                bar.style.height = (barheight - 1) + "px";
                bar.style.backgroundColor = color;
                bar.style.fontSize = "1px";
                chart.appendChild(bar);

            }
            document.body.appendChild(chart);
            return chart;

         }
    </script>
</head>
<body>