1

私はcssとjavascriptにまったく慣れていないので、棒グラフを作成するのに助けが必要です. 私の問題は、とりわけ、ボックス DIV 内のバー DIV の幅を自動調整する必要があることです。したがって、「要素」リストに 2 つの値がある場合は、DIV を拡大して埋める必要がありますが、10 の場合は縮小する必要があります。

Javascript

var element = [ 189, 128, 28, 88];
var _body = document.getElementsByTagName("body")[0];
var _div = document.createElement("div");
_div.id = "box";
_body.appendChild(_div);

var mainbox = document.getElementById("box");

for (var i=0; i <= element.length; i++){
var bars = document.createElement("div");
bars.setAttribute("class", "bar");
bars.id = "bar";
bars.style.height = element[i]+"px";
mainbox.appendChild(bars);
}

var text = document.createElement("div");
text.setAttribute("class", "text");
text.innerHTML="Mitt stapeldiagram";
mainbox.appendChild(text);

CSS 「幅」の値を 100% に設定しましたが、それが正しいかどうかわかりません。

.text{
font-family:"Times New Roman", Times, Sans-serif;
font-size:28px;
font-weight:bold;
color:gray;
text-align:center;
margin-top:370px;
overflow:hidden;
}

#box{
overflow:hidden;
width: 500px;
height: 400px;
margin-top:50px;
margin-left:50px;
padding:10px;
background-color:lightgray;
border-top:3px solid black;
border-right:3px solid black;
box-shadow: 10px 10px 5px #888;
}

.bar{
float:left;
position:relative;
width:100%;
margin:3px;
background-color:blue;
box-shadow: 5px 2px 5px #888;
}
4

1 に答える 1

0

これを試して

var element = [189, 128, 28, 88];

        var _body = document.getElementsByTagName("body")[0];
        var _div = document.createElement("div");
        _div.id = "box";
        _body.appendChild(_div);

        var mainbox = document.getElementById("box");

        // set total box height
        var mainboxHeight = 400;
        // get total
        var total = 0;
        for (var i = 0; i < element.length; i++)
            total += parseInt(element[i]);

        for (var i = 0; i <= element.length; i++) {
            // change elements to percentage
            var elementPerc = Math.round((element[i] / total) * 100);

            var bars = document.createElement("div");
            bars.setAttribute("class", "bar");
            bars.id = "bar";

            var heightPerc = Math.round((elementPerc / 100) * mainboxHeight);

            bars.style.height = heightPerc + "px";
            mainbox.appendChild(bars);
        }

        var text = document.createElement("div");
        text.setAttribute("class", "text");
        text.innerHTML = "Mitt stapeldiagram";
        mainbox.appendChild(text);

これらのライブデモを見る

http://jsfiddle.net/Y3ZzT/

http://jsfiddle.net/dWjGr/

于 2012-11-10T12:55:51.100 に答える