◀︎STUDY JavaScript_014-1 円グラフ / CSS: background-image:conic-gradient
1
-----
-----
-----
-----
グラフ作成の種類(棒や円のような形の種類ではない)
- グラフは HTML と CSS のみで作ることもできる.
- SVG を取り入れたグラフ.
- Canvas を取り入れたグラフ.
- グラフのライブラリーを使用することもできる.
▼ Download: ■ sample_JS_014-ABCD
Pie Chart (円グラフ) / Doughnut Chart (ドーナツ・グラフ) とは
- 円グラフとは, 円全体を100%としてながら, その中に占める項目の構成比を扇形で表したグラフ.
- Doughnut Chart (ドーナツ・グラフ)は円グラフの真ん中が白(空洞なので見た目がドーナツ形)になったもの.
- タイトルとデータ%などを分散して表示するのが円グラフで, 中央にまとめて記述できるのがドーナツ・グラフ.
サンプル - 1
background-color のカラー・コードを #abcdef に指定しながら高さ: 200px / 幅: 200px の円を描いてみる.
サンプル - 2
CSS: background-image:conic-gradient を 25% / 70% / 100% に設定して円グラフを作成する. カラー・コードは #55cc55 / #ff8888 / #abcdef とする.
サンプル - 3
「キウイ25％ / アップル45% / グレープ30%」の文字を配置して円グラフを完成させる.
サンプル - 4
別のバージョンとして, 中心に白い円を描きながら文字を表示するレイアウトも作ってみる.
SVG を使用したグラフ
- Chart.js などのライブラリーを使用できる.
- Scalable Vector Graphics (ベクター方式)なので画像を拡大しても劣化しない.
- グラフのカスタマイズには SVG の知識が必要となる.
Canvas を使用したグラフ
- Chart.js / Canvas.js などのライブラリーを使用できる.
- データを用意するだけで折れ線グラフ / 棒グラフ / ドーナツ・グラフなどを描画することができる.
- デザイン的に印象深いグラフをアニメーションさせることに優れている.
- グラフのカスタマイズには Canvas の知識が必要となる.
1
-----
-----
-----
-----
◀︎Contents STUDY JavaScript_014-1
