山本  洋介

山本 洋介

1643605200

CSSを使用して円、棒、線、および点のグラフを作成する

心配無用!多くの場合、作成する必要があるのは単純なリストまたはテーブルだけです。次に、CSSを少し追加してチャートに変換します。

新しいキャストでFireflyの再起動を行うかどうかについて投票を行ったとしましょう。これは私たちのデータセットである可能性があります:

イェーイ:35%イェーイ:
55%
空白:10%;

ピカピカ!現在、すべてのグラフタイプがこれらのデータに適しているわけではありません。折れ線グラフは、たとえば、カテゴリではなくシリーズを表示する必要がありますが、それを行う方法を示すために、とにかくそれを行います。

CSSについてはあまり詳しく説明せず、特定の属性がどのように機能するかを説明します。そのまま使用するか、調整して、その過程で、これまで知らなかったCSS属性を学習する可能性があります。また、これらは単純なチャートであることに注意してください。ツールチップ、アニメーション、または高度な機能が必要な場合は、チャートライブラリの方が適している場合があります。

コードはGitHubにもあります。

マークアップ

データをロードしたと仮定しますが、データの表示方法はまだ決定していません。プロセスを遅らせる代わりに、HTMLリストでレンダリングし、データを説明するいくつかのCSS変数で装飾して、デザイナーに渡します。

これらのCSS変数を設定します。

  • ラベル:投票の種類(Yay、Nay、Blank)
  • :各投票のパーセンテージ。
  • value-text:テキストとしての値。
  • previous-value:前のデータ項目の値。
  • previous-sum:以前のすべての値の合計。
  • count:データ項目の数。
  • :希望の色。

これらの変数の値は、データから簡単に取得できます。CSSを使用してそれらにアクセスしますvar(--my-variable)

作成するチャートがすでにわかっている場合は、変数の完全なリストはおそらく必要ありません。

お気に入りのフレームワークまたはバニラJSを使用して、データ項目ごとにリスト項目を作成し、変数をインラインスタイルとして設定して、次のマークアップを作成します。


<ul id="votes" style="--count: 3;">
  <li style="
    --label: 'Yay'; --value: 35%; --value-text: '25%'; 
    --previous-value: 0%; --previous-sum: 0%;
    --color: green;"></li>
  <li style="
    --label: 'Nay'; --value: 55%; --value-text: '55%'; 
    --previous-value: 35%; --previous-sum: 35%;
    --color: red;"></li>
  <li style="
    --label: 'Blank'; --value: 10%; --value-text: '10%'; 
    --previous-value: 55%; --previous-sum: 90%;
    --color: blue;"></li>
</ul>

私たちは今、私たちがスタイリングできるものを手に入れました、そしてそれは私たちを強力にします!

全体的なスタイリング

基本的なスタイルを追加して「list-look」を削除し、グラフの全体的なサイズを設定することから始めましょう。

#votes {
  padding: 0;
  list-style-type: none;
  height: 10em;
  width: 10em;
}

本当に、ここで何も起こっていません。

円グラフ

最初に作成するグラフは円グラフです。私たちのデータは全体の一部を表しているので、これは適切です。各リストアイテムは、値を表す色付きの部分と残りの部分である透明な部分で、互いの上に円として描画されます。

#votes {
  position: relative;
}
#votes > li {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: conic-gradient(transparent var(--previous-sum), var(--color) var(--previous-sum));
}

円錐曲線の背景には、previous-sumすべてが透明である必要があると記載されています。その後、すべてが選択した色になるはずです。円は互いに重なり合っているため、余分な色の部分を隠します。余分な部分も透明にすることもできますが、そうする必要はありません。シンプルなチャートを目指していることを忘れないでください。

HTMLリストからの円グラフ

棒グラフ

棒グラフには、縦棒が必要です。バーは下部から開始し、高さは投票値と一致する必要があります。

#votes {
  display: flex;
  align-items: end;
}
#votes > li {
  background-color: var(--color);
  height: var(--value);
  width: calc(100% / var(--count));
}

チャート領域の下部にあるものを使用display: flexして配置しています。align-items: end高さは各要素の値に設定され、幅は「全幅をデータ項目の数で割った値」に設定されます。

HTMLリストの棒グラフ

ポイントチャート

ポイントチャートでは、間隔の中央にポイントを表示します。私たちはそれらを丸くしたい、そして私たちはそれらがまともなサイズを持っていることを望んでいます。

#votes {
  display: flex;
}
#votes > li {
  border-radius: 100%;
  background-color: lightgray;
  width: calc(20% / var(--count));
  height: calc(20% / var(--count));
  margin: auto auto var(--value) auto;
}

marginこの場合、これが最も簡単な解決策であるため、ポイントはを使用して配置されます。ポイントのサイズは、ある幅をデータ項目の数で割って計算されます。試行錯誤で適切な幅を見つけます。20%が自分のデータセットに適していることがわかりました。

ポイントチャートを読みやすくするために、いくつかの水平線を追加します。これを行うには、次を追加します。

#votes {
  ... other styling ...
  position: relative;
}
#votes::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-size: 100% 20%;
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(to top, black 1px, transparent 1px);
}

HTMLリストからのポイントチャート

塗りつぶされた折れ線グラフ

次は、塗りつぶされた折れ線グラフです。これは、棒グラフと折れ線グラフを組み合わせたものです(後者はまだ作成していません)。すぐにわかるように、折れ線グラフよりも簡単です。

このタイプのグラフでは、背景の色が異なることはめったに意味がないため、均一なライトグレーを使用します。

#votes {
  display: flex;
}
#votes > li {
  background-color: lightgray;
  height: 100%;
  width: calc(100% / var(--count));
  clip-path: polygon(
    0 100%, 
    0 calc(100% - var(--previous-value)), 
    100% calc(100% - var(--value)), 
    100% 100%);
}

このグラフは、各リストアイテムをポリゴンとして描画します。上端は、データの以前の値と現在の値によって定義され、対角線になります(もちろん、以前の値と現在の値が同じでない場合)。ポリゴンの残りの部分は長方形になります。

ポリゴンは、(xy)座標のペアによって作成されます。ゴラムのy座標は、上部が0、下部が100%であるj100% — <our value>ため、正しいy値を取得するためにを実行する必要があります。

ここで、ポイントチャートでも使用した水平線を追加するのが適切な場合があります。

HTMLリストからの塗りつぶされた折れ線グラフ

折れ線グラフ

折れ線グラフは、1つの点を除いて、塗りつぶされた折れ線グラフに似ています。グラフの一番下まで描画していません。代わりに、非常に細いポリゴンを描画しているため、線のように見えます。

#votes {
  display: flex;
}
#votes > li {
  background-color: black;
  height: 100%;
  width: calc(100% / var(--count));
  clip-path: polygon(
    0 calc(100% - var(--previous-value)), 
    100% calc(100% - var(--value)), 
    100% calc(100% - var(--value) + 2px), 
    0 calc(100% - var(--previous-value) + 2px));  
}

HTMLリストからの折れ線グラフ

テキストテーブル

CSSアプローチを使用してデータをテーブルとして表示するには、実際にはほとんどのCSSが必要です。また、CSSでは非テキスト(35%など)をテキストに変更できないため、value-text変数を使用して値を表示する必要があります。

#votes {
  border: solid 1px black;
  height: auto;
}
#votes:before {
  content: 'Votes:';
  display: inline-block;
  width: 9em;
  padding-left: 1em;
}
#votes > li::before, #votes > li::after {
  border-top: solid 1px black;
  display: inline-block;
}
#votes > li::before {
  border-right: none;
  content: var(--label);
  width: 5em;
  padding-left: 1em;
}
#votes > li::after {
  border-left: none;
  content: var(--value-text);
  width: 3em;
  padding-right: 1em;
  text-align: right;
}

HTMLリストからのテキストテーブル

結論

ここに、数行のHTMLとCSSで実現できる簡単なグラフの短いリストがあります。

同じ方法で作成できるチャートは他にもたくさんあります。ドーナツチャート、積み上げ折れ線グラフ、または面グラフはどうですか?値、またはx軸とy軸を表示するラベルが必要な場合はどうなりますか?この記事の例を参考にして、チャートを完全に独自のものにするのは難しいことではありません。

この記事が気に入ったら、私をフォローすることを検討してください。その後、あなたは私の乗組員の一部になります。 

リンク:https ://betterprogramming.pub/build-a-pie-bar-line-and-point-chart-using-css-799983a6ab3d

#css 

What is GEEK

Buddha Community

CSSを使用して円、棒、線、および点のグラフを作成する
山本  洋介

山本 洋介

1643605200

CSSを使用して円、棒、線、および点のグラフを作成する

心配無用!多くの場合、作成する必要があるのは単純なリストまたはテーブルだけです。次に、CSSを少し追加してチャートに変換します。

新しいキャストでFireflyの再起動を行うかどうかについて投票を行ったとしましょう。これは私たちのデータセットである可能性があります:

イェーイ:35%イェーイ:
55%
空白:10%;

ピカピカ!現在、すべてのグラフタイプがこれらのデータに適しているわけではありません。折れ線グラフは、たとえば、カテゴリではなくシリーズを表示する必要がありますが、それを行う方法を示すために、とにかくそれを行います。

CSSについてはあまり詳しく説明せず、特定の属性がどのように機能するかを説明します。そのまま使用するか、調整して、その過程で、これまで知らなかったCSS属性を学習する可能性があります。また、これらは単純なチャートであることに注意してください。ツールチップ、アニメーション、または高度な機能が必要な場合は、チャートライブラリの方が適している場合があります。

コードはGitHubにもあります。

マークアップ

データをロードしたと仮定しますが、データの表示方法はまだ決定していません。プロセスを遅らせる代わりに、HTMLリストでレンダリングし、データを説明するいくつかのCSS変数で装飾して、デザイナーに渡します。

これらのCSS変数を設定します。

  • ラベル:投票の種類(Yay、Nay、Blank)
  • :各投票のパーセンテージ。
  • value-text:テキストとしての値。
  • previous-value:前のデータ項目の値。
  • previous-sum:以前のすべての値の合計。
  • count:データ項目の数。
  • :希望の色。

これらの変数の値は、データから簡単に取得できます。CSSを使用してそれらにアクセスしますvar(--my-variable)

作成するチャートがすでにわかっている場合は、変数の完全なリストはおそらく必要ありません。

お気に入りのフレームワークまたはバニラJSを使用して、データ項目ごとにリスト項目を作成し、変数をインラインスタイルとして設定して、次のマークアップを作成します。


<ul id="votes" style="--count: 3;">
  <li style="
    --label: 'Yay'; --value: 35%; --value-text: '25%'; 
    --previous-value: 0%; --previous-sum: 0%;
    --color: green;"></li>
  <li style="
    --label: 'Nay'; --value: 55%; --value-text: '55%'; 
    --previous-value: 35%; --previous-sum: 35%;
    --color: red;"></li>
  <li style="
    --label: 'Blank'; --value: 10%; --value-text: '10%'; 
    --previous-value: 55%; --previous-sum: 90%;
    --color: blue;"></li>
</ul>

私たちは今、私たちがスタイリングできるものを手に入れました、そしてそれは私たちを強力にします!

全体的なスタイリング

基本的なスタイルを追加して「list-look」を削除し、グラフの全体的なサイズを設定することから始めましょう。

#votes {
  padding: 0;
  list-style-type: none;
  height: 10em;
  width: 10em;
}

本当に、ここで何も起こっていません。

円グラフ

最初に作成するグラフは円グラフです。私たちのデータは全体の一部を表しているので、これは適切です。各リストアイテムは、値を表す色付きの部分と残りの部分である透明な部分で、互いの上に円として描画されます。

#votes {
  position: relative;
}
#votes > li {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: conic-gradient(transparent var(--previous-sum), var(--color) var(--previous-sum));
}

円錐曲線の背景には、previous-sumすべてが透明である必要があると記載されています。その後、すべてが選択した色になるはずです。円は互いに重なり合っているため、余分な色の部分を隠します。余分な部分も透明にすることもできますが、そうする必要はありません。シンプルなチャートを目指していることを忘れないでください。

HTMLリストからの円グラフ

棒グラフ

棒グラフには、縦棒が必要です。バーは下部から開始し、高さは投票値と一致する必要があります。

#votes {
  display: flex;
  align-items: end;
}
#votes > li {
  background-color: var(--color);
  height: var(--value);
  width: calc(100% / var(--count));
}

チャート領域の下部にあるものを使用display: flexして配置しています。align-items: end高さは各要素の値に設定され、幅は「全幅をデータ項目の数で割った値」に設定されます。

HTMLリストの棒グラフ

ポイントチャート

ポイントチャートでは、間隔の中央にポイントを表示します。私たちはそれらを丸くしたい、そして私たちはそれらがまともなサイズを持っていることを望んでいます。

#votes {
  display: flex;
}
#votes > li {
  border-radius: 100%;
  background-color: lightgray;
  width: calc(20% / var(--count));
  height: calc(20% / var(--count));
  margin: auto auto var(--value) auto;
}

marginこの場合、これが最も簡単な解決策であるため、ポイントはを使用して配置されます。ポイントのサイズは、ある幅をデータ項目の数で割って計算されます。試行錯誤で適切な幅を見つけます。20%が自分のデータセットに適していることがわかりました。

ポイントチャートを読みやすくするために、いくつかの水平線を追加します。これを行うには、次を追加します。

#votes {
  ... other styling ...
  position: relative;
}
#votes::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-size: 100% 20%;
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(to top, black 1px, transparent 1px);
}

HTMLリストからのポイントチャート

塗りつぶされた折れ線グラフ

次は、塗りつぶされた折れ線グラフです。これは、棒グラフと折れ線グラフを組み合わせたものです(後者はまだ作成していません)。すぐにわかるように、折れ線グラフよりも簡単です。

このタイプのグラフでは、背景の色が異なることはめったに意味がないため、均一なライトグレーを使用します。

#votes {
  display: flex;
}
#votes > li {
  background-color: lightgray;
  height: 100%;
  width: calc(100% / var(--count));
  clip-path: polygon(
    0 100%, 
    0 calc(100% - var(--previous-value)), 
    100% calc(100% - var(--value)), 
    100% 100%);
}

このグラフは、各リストアイテムをポリゴンとして描画します。上端は、データの以前の値と現在の値によって定義され、対角線になります(もちろん、以前の値と現在の値が同じでない場合)。ポリゴンの残りの部分は長方形になります。

ポリゴンは、(xy)座標のペアによって作成されます。ゴラムのy座標は、上部が0、下部が100%であるj100% — <our value>ため、正しいy値を取得するためにを実行する必要があります。

ここで、ポイントチャートでも使用した水平線を追加するのが適切な場合があります。

HTMLリストからの塗りつぶされた折れ線グラフ

折れ線グラフ

折れ線グラフは、1つの点を除いて、塗りつぶされた折れ線グラフに似ています。グラフの一番下まで描画していません。代わりに、非常に細いポリゴンを描画しているため、線のように見えます。

#votes {
  display: flex;
}
#votes > li {
  background-color: black;
  height: 100%;
  width: calc(100% / var(--count));
  clip-path: polygon(
    0 calc(100% - var(--previous-value)), 
    100% calc(100% - var(--value)), 
    100% calc(100% - var(--value) + 2px), 
    0 calc(100% - var(--previous-value) + 2px));  
}

HTMLリストからの折れ線グラフ

テキストテーブル

CSSアプローチを使用してデータをテーブルとして表示するには、実際にはほとんどのCSSが必要です。また、CSSでは非テキスト(35%など)をテキストに変更できないため、value-text変数を使用して値を表示する必要があります。

#votes {
  border: solid 1px black;
  height: auto;
}
#votes:before {
  content: 'Votes:';
  display: inline-block;
  width: 9em;
  padding-left: 1em;
}
#votes > li::before, #votes > li::after {
  border-top: solid 1px black;
  display: inline-block;
}
#votes > li::before {
  border-right: none;
  content: var(--label);
  width: 5em;
  padding-left: 1em;
}
#votes > li::after {
  border-left: none;
  content: var(--value-text);
  width: 3em;
  padding-right: 1em;
  text-align: right;
}

HTMLリストからのテキストテーブル

結論

ここに、数行のHTMLとCSSで実現できる簡単なグラフの短いリストがあります。

同じ方法で作成できるチャートは他にもたくさんあります。ドーナツチャート、積み上げ折れ線グラフ、または面グラフはどうですか?値、またはx軸とy軸を表示するラベルが必要な場合はどうなりますか?この記事の例を参考にして、チャートを完全に独自のものにするのは難しいことではありません。

この記事が気に入ったら、私をフォローすることを検討してください。その後、あなたは私の乗組員の一部になります。 

リンク:https ://betterprogramming.pub/build-a-pie-bar-line-and-point-chart-using-css-799983a6ab3d

#css