メインコンテンツへスキップ

Mermaid 11.15.0

Mermaid 円グラフの書き方・早見表

円グラフは一つの合計に対する少数の正の割合を比較します。カテゴリが多い場合や近い値には棒グラフ、二つの独立した尺度には四象限図を使います。

円グラフジェネレーターで作成 →

クイックスタート

値は重みで、合計100は不要です。Mermaidが割合を計算します。

Mermaid
エディターで開く → 
pie showData
  title 文書作成の工数
  "執筆" : 48
  "レビュー" : 32
  "公開" : 20

読み込み中…

構文リファレンス

構文リファレンス
構文意味
pie / pie showData図を宣言し、showDataで元の値を凡例に追加します。
title Text任意のタイトルを付けます。
"Label" : 12.75ラベルを引用符で囲み、正の重みを指定します。文書上の精度は小数2桁です。
config.pie.textPosition: 0.75半径方向の位置です。0が中心、1が外周です。
themeVariables.pieOuterStrokeWidth: "2px"外周の線幅です。
themeVariables.pie1…pie12theme baseで各扇形の色を設定します。
pieTitleTextSize / pieTitleTextColor / pieSectionTextSize / pieSectionTextColorタイトルと扇形の文字用のテーマ変数です。
pieLegendTextSize / pieLegendTextColor / pieStrokeColor / pieStrokeWidth / pieOuterStrokeColor / pieOpacity凡例、境界線、透明度のテーマ変数です。
%% / accTitle: / accDescr:コメントとアクセシビリティ用の説明です。

小数と割合

正の重みと小数点を使います。小数にカンマを使う言語でもコードは点です。showDataは元の重みを表示し、割合のラベルは整数に丸められます。Mermaid 11.15では1%未満の扇形は表示されませんが、凡例には残ります。

Mermaid
エディターで開く → 
pie showData
  title 編集時間
  "下書き" : 12.75
  "事実確認" : 6.25
  "校正" : 3.50

読み込み中…

ラベルと凡例

カテゴリ名を短くします。showDataなしでは凡例は名前のみで、扇形の割合は表示されます。小さすぎる項目を避けましょう。

文字の位置

textPositionは半径の比率です。値を小さくすると中央に寄ります。重なる場合はまずデータを整理しましょう。

Mermaid
エディターで開く → 
---
config:
  pie:
    textPosition: 0.6
---
pie showData
  title レビューの配分
  "技術" : 60
  "編集" : 40

読み込み中…

色と外周の線

theme baseとpie1…pie12を使います。pieOuterStrokeWidthはCSSの長さです。文字や線が背景と区別できるようにします。

Mermaid
エディターで開く → 
---
config:
  theme: base
  themeVariables:
    pie1: "#d3e5ff"
    pie2: "#50e3c2"
    pie3: "#f5f5f5"
    pieOuterStrokeWidth: "2px"
    pieSectionTextColor: "#171717"
---
pie showData
  title 作業の配分
  "調査" : 45
  "執筆" : 35
  "レビュー" : 20

読み込み中…

よくある間違い

負の重みを使う

負数は拒否されます。正の値を使い、純損失には別の図を選びます。

誤った構文（下に修正例があります）

pie
  "レビュー" : -2

小数にカンマを使う

12,75ではなく12.75と書き、文書の記法に合わせて小数2桁に丸めます。

制約

  • 扇形を表示するには正の重みを使います。ゼロは受け付けますが扇形は描かれず、負数は拒否されます。
  • 元の値は小数2桁の記法が文書化されていますが、割合のラベルは整数に丸められます。1%未満の扇形は表示されません。
  • 多数のカテゴリや近い値は棒グラフの方が比較しやすくなります。

よくある質問 (FAQ)

合計は100にする必要がある？
不要です。各正の値を合計で割り、割合を求めます。
showDataは何を変える？
元の値を凡例に追加します。形や重みは変えません。
扇形の色を変えるには？
theme baseを指定し、themeVariablesでpie1…pie12を設定します。