CSSを使用して面グラフを作成する方法

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

面グラフは、データ セットをグラフィック形式で表すために使用されます。 HTML と CSS を使用すると、面グラフを作成できます。したがって、開始と終了として 2 つのカスタム変数を作成します。カスタム変数は、記号「--」と変数名を使用して作成できます。たとえば、-width、-height、-start のような変数を作成します。 ＃＃＃アルゴリズム＃＃＃

ステップ 1

- HTML ファイルを作成し、テキスト エディタでファイルを開きます。 HTML テンプレートを HTML ファイルに追加します。

ステップ 2

−

次に、親 div コンテナを作成し、chart というクラス名を付けます。

リーリー

ステップ 3 − ul タグを作成してグラフ リスト項目を作成します。

リーリー

ステップ 4 − 次に、li タグを使用してグラフの棒を作成します

リーリー

ステップ 5 − チャートの開始点と終了点を定義することで、li タグにカスタム変数を追加することもできます。

リーリー

ステップ 6 − 次に、同じフォルダーに style.css ファイルを作成し、style.css ファイルを HTML ドキュメントにリンクします。

リーリー

ステップ 7 − ここで、「areaChart」コンテナとすべてのリスト項目をターゲットにします。

ステップ 8 − 面グラフが正常に作成されました。

＃＃＃例＃＃＃

この例では、カスケード スタイル シート (CSS) を使用してグラフの領域を作成しました。これを実現するために、最初のファイルは HTML ファイルで、もう 1 つはスタイル ファイルです。このために 2 つのファイルを作成しました。リスト項目を含む順序なしリストを作成しました。HTML ファイルでは、一連のデータを含む ul タグを作成しました。 リーリー 以下の画像は、上記の例の出力を示しています。グラフ形式で表されたデータセットを含むグラフ領域を示しています。データを HTML の li タグ内のカスタム変数として設定し、グラフに表示される開始点と終了点を設定します。 ＃＃＃結論は＃＃＃ 上の例と同様に、HTML と CSS を使用して静的グラフを作成しました。したがって、JavaScript を使用するか、API をグラフのラベルに接続することで、グラフの領域を動的にすることもできます。上記の例を使用する際、最初のリスト項目の開始点は次のリスト項目の終了点と同じである必要があることを覚えておく必要があります。 li タグを使用してチャートの棒を作成しているため、div または table コンテナーを使用することもできます。

以上がCSSを使用して面グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。