CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。

HTML:

<div class="his_box">
    <div>スコア分布ヒストグラム</div>
    <div class="ヒストグラム">
        <div><div>10</div></div>
        <div><div>8</div></div>
        <div><div>15</div></div>
        <div><div>12</div></div>
        <div><div>5</div></div>
    </div>
</div>

CS: ...

.his_box{ /*ボックス*/
            幅: 400ピクセル;
            高さ: 220px;
            境界線: 実線 1px #1E90FF;
            ディスプレイ: フレックス;
            flex-direction: 列;
            アイテムの位置を中央揃えにします。
        }
        .histogram{ /*ヒストグラム*/
            ディスプレイ: フレックス;
        }
        .histogram>div{ /*タイル*/
            幅: 30ピクセル;
            height: 200px; /*ブロックの高さを100%にする*/
            フォントサイズ: 14px;
            テキスト配置: 中央;
            右マージン: 5px;
            ディスプレイ: フレックス;
            flex-direction: 列反転;
        }
        .histogram>div:nth-child(3n) div{ /*タイルの色*/
            背景色: #ff404b;
        }
        .ヒストグラム>div:n番目の子(3n+1)div{
            背景色: #99CCFF;
        }
        .ヒストグラム>div:n番目の子(3n+2)div{
            背景色: #F0AD4E;
        }
        .ヒストグラム>div:n番目の子(1)div{
            flex: 0 0 50%; /*20は100%、50%は10*/
        }
        .ヒストグラム>div:n番目の子(2)div{
            フレックス: 0 0 40%; /*8/20*/
        }
        .ヒストグラム>div:n番目の子(3)div{
            フレックス: 0 0 75%; /*15/20*/
        }
        .ヒストグラム>div:n番目の子(4)div{
            フレックス: 0 0 60%; /*12/20*/
        }
        .ヒストグラム>div:n番目の子(5)div{
            フレックス: 0 0 25%; /*5/20*/
        }

この例では、タイルの最高点は 20 で、各列の高さは比例して定義されます。最初のデータは 10 で、高さは 50%、2 番目のデータは 8 で、高さは 40% などです。

タイルの色は 3 色で循環します。

レイアウト中、最も外側のコンテナーは align-items: center; を使用して、コンテナー内の要素全体を中央に配置します。

ヒストグラム モジュールは、display: flex; を使用して、モジュール内の列を水平に配置します。

各列もフレックス モジュールですが、レイアウト方向は垂直で、方向は下から上になります flex-direction: column-reverse;

垂直に配置されたヒストグラムを作成する場合:

CS: ...

.his_box{ /*ボックス*/
            幅: 400ピクセル;
            高さ: 220px;
            境界線: 実線 1px #1E90FF;
            ディスプレイ: フレックス;
            flex-direction: 列;
            コンテンツの両端揃え: スペースの間;
        }
        .his_box>div{
            テキスト配置: 中央;
        }
        .histogram{ /*ヒストグラム*/
            ディスプレイ: フレックス;
            flex-direction: 列;
        }
        .histogram>div{ /*タイル*/
            高さ: 30px;
            width: 200px; /*ブロック幅100%*/
            行の高さ: 30px;
            フォントサイズ: 14px;
            テキスト配置: 右;
            下部マージン: 5px;
            ディスプレイ: フレックス;
        }
        .histogram>div:nth-child(3n) div{ /*タイルの色*/
            背景色: #ff404b;
        }
        .ヒストグラム>div:n番目の子(3n+1)div{
            背景色: #99CCFF;
        }
        .ヒストグラム>div:n番目の子(3n+2)div{
            背景色: #F0AD4E;
        }
        .ヒストグラム>div:n番目の子(1)div{
            flex: 0 0 50%; /*20は100%、50%は10*/
        }
        .ヒストグラム>div:n番目の子(2)div{
            フレックス: 0 0 40%; /*8/20*/
        }
        .ヒストグラム>div:n番目の子(3)div{
            フレックス: 0 0 75%; /*15/20*/
        }
        .ヒストグラム>div:n番目の子(4)div{
            フレックス: 0 0 60%; /*12/20*/
        }
        .ヒストグラム>div:n番目の子(5)div{
            フレックス: 0 0 25%; /*5/20*/
        }

CSS を使用して Flex レイアウトでシンプルな棒グラフを作成する方法についての記事はこれで終わりです。CSS 棒グラフに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  HTMLにスクリプトを追加する2つの方法と注意点

>>:  Vue でスクロールバーのスタイルを変更する方法

推薦する

CSS を使用してデータ ホットスポット効果を実現する方法

効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...

MySQL Index Pushdown (ICP) とは何かを理解するための記事

目次1. はじめに2. 原則III. 実践3.1 インデックスプッシュダウンを使用しない3.2 イン...

JavaScript カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

iframe の多層ネスト、無制限のネスト、高度に適応したソリューション

ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...

ウェブデザインを改善するための 8 つの CSS ツールを共有する

ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

CSS で背景ぼかし効果を実装するサンプルコード

以下のような効果でしょうか?もしそうなら、ぜひ読み進めてください! コードデモンストレーション(上の...

CSSにおけるマージン値と垂直マージンの重なりについて

平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...

LambdaProbe を使用して Tomcat を監視する方法

導入: Lambda Probe (旧称 Tomcat Probe) は、Apache Tomcat...

Vue ページレンダリングにおけるキーの適用例チュートリアル

導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...

MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法

前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...

MySQL でスロークエリログを有効にする方法

1.1 はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメ...

React双方向データバインディングの原理についての簡単な説明

目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...

vue+iviewのメニューとタブの連携方法

Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...