シンプルなチャート使ったdiv

Question

私はチャートを生成するために、以下の使用しています

for(let i=0;i<1000;i++){ 
 
    let rect = document.createElement('div') 
 
    rect.style.backgroundColor = '#dd21d1' 
 
    rect.style.height = Math.random() +'px' 
 
    rect.style.width='.5px' 
 
    rect.style.transform = `scaleY(100) translateX(${i}px)` 
 
    document.body.appendChild(rect) 
 
}

しかし、私のy座標は常にゼロであっても、少なくとも、それは私が代わりに1で長方形を見て、何を考えています彼らは垂直に追加されているようですが、これはどうして起こりますか？

Answer 1

Divのデフォルトではdisplay: blockで、他のコンテンツを次の行にプッシュします。あなたは、本体に追加する前にこの行を追加することで、inline-blockように、これらのdivを伝えることで、この問題を解決することができます

rect.style.display = 'inline-block'を

全体のスニペットはそう見えるように更新される：

for(let i=0;i<1000;i++){ 
    let rect = document.createElement('div') 
    rect.style.backgroundColor = '#dd21d1' 
    rect.style.height = Math.random() +'px' 
    rect.style.width='.5px' 
    rect.style.transform = `scaleY(100) translateX(${i}px)` 
    rect.style.display = 'inline-block' 
    document.body.appendChild(rect) 
} 

Answer 2

CSSのデフォルトdisplayプロパティはです。あなたはおそらくinline-blockを使ってグラフを作成したいと思うでしょう。

here