円グラフ
円グラフは、数値の比率を表示する円形の統計グラフで、円を比例的な扇形に分割してデータを表示します。
構文
基本要素
- タイトル:
pie title [グラフタイトル] - データ項目:
"[ラベル]" : [値] - オプション:
showData- 値を表示
基本例
コード:
mermaid
pie title シンプルな円グラフ
"セクション A" : 30
"セクション B" : 50
"セクション C" : 20
応用例
ウェブサイトのトラフィックソースを示すより詳細な円グラフ：
コード:
mermaid
pie showData title ウェブサイトトラフィックソース
"オーガニック検索" : 35.7
"直接アクセス" : 24.3
"ソーシャルメディア" : 20.5
"リファラル" : 12.8
"メールマーケティング" : 6.7
データの可視化
マーケットシェアの例
コード:
mermaid
pie title 2024年第1四半期マーケットシェア
"企業 A" : 45.2
"企業 B" : 28.7
"企業 C" : 15.3
"その他" : 10.8
時間配分
コード:
mermaid
pie showData title 日常活動の配分
"仕事" : 8
"睡眠" : 7
"余暇" : 4
"運動" : 1
"その他" : 4
機能
データ値の表示
showData を使用して実際の値を表示できます：
コード:
mermaid
pie showData title 予算配分
"開発" : 40
"マーケティング" : 20
"運用" : 30
"管理" : 10
スタイル設定
円グラフは自動的に：
- 扇形に異なる色を割り当て
- 比率を計算
- ラベルを表示
- パーセンテージや値を表示（showData使用時）
実用的なヒント
- 扇形の数を管理（7個以下を推奨）
- 明確で簡潔なラベルを使用
- 大きさでの並び替えを検討
- 意味のあるタイトルを使用
- 値が重要な場合は
showDataを追加 - 合計値が意味を持つことを確認
- 小数点以下の桁数を統一
よくある問題の解決
可読性の問題
- 扇形が多すぎないようにする
- 明確なラベルを使用
- 適切な色のコントラストを確保
データの問題
- 合計値を確認
- 比率の計算をチェック
- データ形式が正しいことを確認
表示の問題
- ラベルの位置を調整
- 色の選択を最適化
- 重なりの問題に対処
ベストプラクティス
- データは簡潔明瞭に
- 色は明確に区別
- ラベルは理解しやすく
- 比率は正確に
- 合計は意味のある値に
- 並び順は論理的に
- 凡例は見やすく