パイチャートは、データをスライスに分割することで数値の割合を表示するために使用される円形の統計グラフです。Mermaid.jsでは、複雑なチャートライブラリやベクターデザインツールを弄ることなく、クリーンで応答性のあるデータ分解を自動的に構築できます。レンダリングエンジンがすべての色の割り当てとパーセンテージ計算を動的に処理します。
基本構文構造
すべてのパイチャートは次のpie宣言から始まります。任意でタイトルを含めることができ、その後にカテゴリーラベルが引用符で囲まれ、正の数値とペアになるデータエントリを記述します。
pie
title サンプルパイチャート
"カテゴリA" : 45
"カテゴリB" : 30
"カテゴリC" : 25
構文リファレンス
以下の表は、Mermaid.jsでパイチャートマップを構築するために使用される主要な構造オプションを説明しています。
| コンポーネント | 説明 | 構文例 |
|---|---|---|
| 宣言 | パイチャートレンダリングエンジンを初期化します。 | pie |
| データ表示フラグ | 「pie」の直後に追加されるオプションの修飾子で、計算されたパーセンテージに加えて実際の数値を表示します。pie計算されたパーセンテージとともに実際の数値を表示するためのものです。 |
pie showData |
| タイトル | 図の中央の上に明確に表示されるオプションの見出しです。 | title Q3収益源 |
| データエントリラベル | カテゴリ名で、常に二重引用符で囲む必要があります。 | "オーガニック検索" |
| データ区切り | ラベル文字列とその数学的値を分けるコロン文字。 | : |
| データ値 | 正の数。絶対値のカウントまたは小数点以下2桁までの直接的な小数重量をサポートします。 | 54.25 |
実世界のブループリント：ウェブサイトのトラフィックソース
このブループリントは、クラシックなマーケティングおよびアナリティクスダッシュボードの構成を示しています。これはshowDataパラメータを使用して、図表がレイアウトの割合を提示している間、凡例内に直接生のトラフィックメトリクスを明示的に表示します。
pie showData title コアトラフィックチャネル
"オーガニック検索" : 3540
"直接トラフィック" : 2410
"ソーシャルメディア" : 1850
"リファラーサイト" : 920
"メールキャンペーン" : 680
構文のヒント：デフォルトでは、Mermaidは各チャートセクション上に相対的な計算されたパーセンテージ（例：35％）のみを表示します。showDataキーワードをpieの直後に追加すると、ラベルがチャート上のパーセンテージと併せて、付随する凡例リスト内の正確な生の値を表示するように変更されます。
高度なコンセプト：ディレクティブとフォーマット
高密度のドキュメンテーションページでは、コードスニペットの先頭にインライン設定ディレクティブを適用することで、スタイリングの挙動をカスタマイズしたり、テキスト配置のオフセットを変更したり、構造的な線のスタイルを変更したりできます。
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie title 業務予算配分
"プロダクト開発" : 40.5
"マーケティング＆成長" : 25.25
"カスタマーオペレーション" : 20.0
"管理費" : 14.25
一般的な構文の落とし穴
パイチャートはMermaidの中で最もシンプルな構文の一つですが、いくつかのフォーマットのミスがレイアウトのパース失敗を引き起こします。以下の一般的な誤りを避けてください：
- 負の数：レンダリングエンジンは正の数値のみを受け入れます。負の値またはゼロを渡すと、数学処理の境界が破綻します。
- 引用符の要件： データカテゴリラベルは常に二重引用符を使用する必要があります。単一引用符や引用符の省略は、正しくビルドされない原因になります。
- 小数点精度の制限： Mermaidは正確な浮動小数点数をスムーズに処理できますが、ネイティブではパラメータを小数点以下2桁まで追跡します。事前に値を四捨五入することで、厳密な一貫性を保つことができます。
- スライス密度： 明確な視覚的コミュニケーションのため、チャートのスライス数を6～8個に制限することが最良の実践です。データセットの要素数がそれ以上の場合、小さなノードを「その他」というカテゴリにまとめて、デザインのスキャン性を保つようにしましょう。