Pie chart diagrams

Mermaid can render Pie Chart diagrams.

pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

円グラフを HTML 上に描きたくなる状況が思い浮かばぬが、習得しよう。

Syntax

Drawing a pie chart is really simple in mermaid.

[pie] [showData] (OPTIONAL)
     [title] [titlevalue] (OPTIONAL)
      "[datakey1]" : [dataValue1]
      "[datakey2]" : [dataValue2]
      "[datakey3]" : [dataValue3]
      ...

円グラフを多用する執筆者は、上のテキストをエディターのスニペッツにしておくといいかもしれない。

Example

%%{init: {"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

%%{init: {"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

Configuration

オプション textPosition はスライスラベルの軸方向の位置を 0.0 から 1.0 までの値で指定する。この数は中心から円周までに対応する。