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

Question

Im currerntly using Canvas Js to show different charts. In one of the requirement i would like to show multiple charts side by side. These are mostly doughnut charts. However im unable to achieve it.

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

Working Fiddle : https://jsfiddle.net/SujitJ/zm0gbp80/8/

CSS:

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

Currently in the fiddle i have just included 2 div for charts but the no. of div would be dynamic hence would need a dynamic solution for the placement of div

Answer 1

You can use .appendchild() in a while loop to render the div that you want in a dynamic way.

You first create a variable, where you will tell in which element ( we take the id of the element ) you want to append the divs.

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

Then we do a simple while loop.

{
 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/

Use inspect element to see the two divs. If you want to add more divs, just change the number in while(i<=2) to whatever you need.

Answer 2

You can use class = "container" to set your classes in row with equal dimensions.

 <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> 

If number of charts are different or dynamic, you can choose class col-md-4 at run time using javascript DOM.