1つのページに2つの異なるハイチャートを並べて配置したいと思います。 1つは円グラフで、もう1つはゲージチャートです。この構造を整理するのを助けてくれますか?どのように2つの異なるグラフを並べるのですか?
-2
A
答えて
0
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>
1
あなたは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"
を次の要素に追加することを忘れないでください。がんばろう!お役に立てれば!
0
あなたは、あなたがそれに精通している場合は、ブートストラップを使用することができます。この
<div class="col-md-12">
<div class="col-md-6">
Chart 1
</div>
<div class="col-md-6">
Chart 2
</div>
</div>
関連する問題
- 1. 異なるタイトルサイズの異なる2つのボタンのタイトルをどのように縦に並べますか?
- 2. 2つのグラフ(円と棒)を並べて並べる:: d3 js
- 3. 異なる順序で2つのArrayListsをどのように並べ替えるか?
- 4. どのように2つの異なるバージョンのjQueryを並べて使用しますか?
- 5. 2つの異なるフォントサイズを並べるにはどうすればいいですか?
- 6. arraycollectionを2つの異なるフィールドからの数値で並べ替える
- 7. カテゴリの値を棒グラフでどのように並べ替えますか? [R]
- 8. 2つのデータ軸を異なる円でどのようにするか
- 9. コンテナ内の異なるフォントサイズの2つのdivを縦に並べる方法
- 10. どのように私は2つの異なるパス持つ2つの異なるパスに
- 11. 2つのdivを並べるにはどうすればいいですか?
- 12. 2つのフローを並べるにはどうすればいいですか?
- 13. 2つのパラメータで異なるコード行のリストを並べ替える
- 14. どのようにテーブルの行を並べるのですか?
- 15. どのように2つの異なるイベントボックスサイズを使用できますか
- 16. データをどのように並べ替えるのですか?
- 17. アレイをどのように並べ替えるのですか?
- 18. GridViewをどのように並べ替えるのですか?
- 19. UITableViewCellで2つのイメージをどのように並べて追加するのですか?
- 20. スタックパネルでどのように並べるのですか?
- 21. SQL Serverの異なる2つのクエリのレコードを並べ替える方法
- 22. 2つの異なる詳細セクションと2つの異なるテーブルが並んでいますか?
- 23. 2つの異なるグラフをPythonでプロットする方法
- 24. JSとはどのように2つの異なる形式ですか?
- 25. アクティブなレコードを持つ2つの異なるデータベースをどのように扱うのですか?
- 26. 2つのdivを横に並べてどのようにフィットさせるのですか?
- 27. 2つの対応するdivを並べて並べる
- 28. 2つのdivをどのように並べて配置するのですか?
- 29. どのように1つの選択を2つの異なるテーブルに挿入するのですか?
- 30. 2つのタグを横に並べる
のようなブートストラップクラスを追加することができます。 –
現在の関連コードを追加してください。 –
[こちら](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side)および[ここ](https://stackoverflow.com/questions/17217766/two) -divs-side-by-side-fluid-display)で表示されます。 – evolutionxbox