使用CSS與CanvasJS圖表並排設置多個div

Question

我立即使用Canvas Js顯示不同的圖表。 在一項要求中，我想並排顯示多個圖表。 這些大多是甜甜圈圖。 但是即時通訊無法實現。

JS小提琴： https : //jsfiddle.net/Lqw6a2dq/

工作小提琴： https : //jsfiddle.net/SujitJ/zm0gbp80/8/

CSS：

.container{
display: flex;
flex-flow: row wrap;    
justify-content: space-between;
}

目前在小提琴中，我剛剛將2 div包括在圖表中，但沒有。 的div是動態的，因此需要動態解決div的位置

Answer 1

您可以在while循環中使用.appendchild（）以動態方式呈現所需的div。

首先創建一個變量，在其中您將要在哪個元素（我們采用元素的id）中告訴您要附加div的變量。

var div = document.getElementById('container');

然后我們做一個簡單的while循環。

{
 if(!document.getElementById('chartContainer'+i))
  {
    var ele = document.createElement("div");//we say what element we should create, a div in our case
    ele.setAttribute("id","chartContainer"+i);//add the id to our element
    div.appendChild(ele);     
  }
  i++;
}

https://jsfiddle.net/Lqw6a2dq/1/

使用inspect元素查看兩個div。 如果要添加更多div，只需將while(i<=2)的數字更改為所需的數字即可。

Answer 2

您可以使用class =“ container”在尺寸相等的行中設置類。

 <div class= "container"> <div class="row"> <div class="col-md-4">Chart 1</div> <div class="col-md-4">Chart 2</div> <div class="col-md-4">Chart 3</div> </div> </div> 

如果圖表數量不同或動態，則可以在運行時使用JavaScript DOM選擇類col-md-4。