構成比・割合Pie & Donut Chart難易度: 簡単
円・ドーナツグラフ
一言でわかる可視化ポイント
「全体を100%としたときの内訳・シェア」の割合を把握する
全体の構成比率(シェア)を円の角度で表現します。中央をくり抜いたドーナツグラフは、中央に合計値や主要メッセージを記載できるためデザイン的にも人気があります。
インタラクティブプレビュー
EC売上比55.8%
※マウスホバーやクリックでアニメーションや数値の変化を確認できます。
おすすめHTML/CSSカラーパレットサンプル
ダッシュボードの視認性を高めるためのカラーコード例です。グラフで最も伝えたい要素にイエローなどのアクセントカラーを割り当て、比較対象にはダークカラーを使用します。
1位シェア
最大構成要素
#FACC15HEX
2位シェア
次点要素
#60A5FAHEX
その他
残りの細かな要素
#3F3F46HEX
こんな可視化に向いている(GOOD)
- スマホ・PC・タブレットのアクセス端末比率
- 決済方法の内訳(クレジットカード・PayPay・現金)
- 顧客の年代別構成比
やってはいけないNGパターン(BAD)
- 構成要素が6個以上ある状態(角度の微妙な差が人間には判別不可能)
- 合計が100%にならないデータを無理やり円グラフにする
標準機能で対応しているおすすめBIツール
Looker StudioPower BIMetabase
Looker StudioからRetoolまで!BIツール比較ガイドを読む