html - 使用 CSS 将多个 div 与 CanvasJS 图表并排设置

Question

我目前正在使用 Canvas Js 来显示不同的图表。在其中一项要求中，我想并排显示多个图表。这些主要是圆环图。但是我无法实现它。

JS fiddle :https://jsfiddle.net/Lqw6a2dq/

工作 fiddle :https://jsfiddle.net/SujitJ/zm0gbp80/8/

CSS:

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

目前在 fiddle 中，我刚刚为图表添加了 2 个 div，但没有。 div 将是动态的，因此需要一个动态解决方案来放置 div

Answer 1

您可以使用 .appendchild()在 while 循环中以动态方式呈现您想要的 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 element 查看这两个 div。如果你想添加更多的div，只需更改while(i<=2)中的数字即可。无论你需要什么。