Jazzと読書の日々

iPadを筆記具として使う方法を模索します

Mermaid記法でパイチャートを描く(入門編)

いわゆる円グラフ。

Mermaid

プログラムの仕様書を書くのに必要そうなグラフは揃っているのですが、なぜか棒グラフや折れ線グラフがない。調べていると、ここあたりが不思議に思えます。

システムの設計をイメージしていて、結果の報告は考えていない感じ。どういう思想が背景にあるんだろうか。

パイチャート

数値を並べると円グラフを描きます。

```mermaid
pie
title シュート数
"日本" : 12
"ドイツ" : 26
```

項目は""で囲んでください。下図のようになります。

pie
title シュート数
"日本" : 12
"ドイツ" : 26

データの明示

```mermaid
pie showData
title インターセプト数
"日本" : 6
"ドイツ" : 3
```

「showData」でローデータも表示できます。

pie showData
title インターセプト数
"日本" : 6
"ドイツ" : 3

あら、見切れてしまうのか。困るじゃん。

実例

```mermaid
pie showData
title 得点数
"日本" : 2
"ドイツ" : 1
"スペイン" : 7
"コスタリカ" : 0
```

他にオプションはない模様。

pie showData
title 得点数
"日本" : 2
"ドイツ" : 1
"スペイン" : 7
"コスタリカ" : 0

円グラフの順番が多いもの順なので注意。

まとめ

ワールドカップのハイライトはFIFAのサイトにあります。