円グラフ
円グラフは、数値の割合を示すために複数の扇形に分割された円形の統計図形です。円グラフでは、各扇形の弧の長さはそれが表す数量に比例します。
Mermaid は円グラフをレンダリングできます。
コード
コピー
埋め込み
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
構文
Mermaid で円グラフを描画するのは非常に簡単です。
showData は凡例テキストの後に実際の数値をレンダリングすることを表し、これは任意です。
- その後に title 構文とその文字列値が続き、円グラフにタイトルを設定します。これは任意です。
- 次にデータセットがあり、円グラフの扇形はラベルの順序で時計回りに配置されます。
円グラフの一部の label で、二重引用符で囲みます。
その後に区切り文字としてコロン : が続きます。
その後に positive numeric value が続き、具体的な数値を表し、最大 2 桁の小数をサポートします。
mermaid.grammar_pie_data_option_title_value
例
コード
コピー
埋め込み
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
構成
円グラフは以下の構成パラメータをサポートします:
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
| textPosition | 円グラフの扇形ラベルの軸方向の位置で、中心の 0.0 から円の端の 1.0 までです。 | 0.75 |
| donutHole | ドーナツ穴の比率。有効な値の範囲は 0 から 0.9 です。 | 0.1 |
| legendPosition | 図に対する凡例の位置。有効な値は top、bottom、left、right、center です。 | top |
| highlightSlice | 一致するラベルを持つ特定の扇形をハイライトします。hover に設定すると、ホバーしている扇形がハイライトされます。 | hover |
