どのように2つの異なるグラフを並べるのですか？

Question

1つのページに2つの異なるハイチャートを並べて配置したいと思います。 1つは円グラフで、もう1つはゲージチャートです。この構造を整理するのを助けてくれますか？

Answer 1

1つのオプションはフレックスボックスを使用しています。

.container { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 

 
.chart1, 
 
.chart2 { 
 
    width: 50%; 
 
    background-color: lightblue; 
 
    border: thin solid darkgray; 
 
}

<div class="container"> 
 
    <div class="chart1">chart 1</div> 
 
    <div class="chart2">chart 2</div> 
 
</div>

Answer 2

あなたはfloatを使用することができます。 floatの詳細についてはhereをご覧ください。このようなものがあれば試してみてください。

#chart1{ 
    width: 50%; /* set width to 50% of page width */ 
    float: left; /* Make the element go to the left */ 
} 

#chart2{ 
    width: 50%; 
    float: right; 
} 

style="clear: both"を次の要素に追加することを忘れないでください。がんばろう！お役に立てれば！

Answer 3

あなたは、あなたがそれに精通している場合は、ブートストラップを使用することができます。この

<div class="col-md-12"> 
    <div class="col-md-6"> 
    Chart 1 
    </div> 
    <div class="col-md-6"> 
    Chart 2 
    </div> 
</div>