マーメイド#18 円グラフ

ひとりマーメイド18日目
円グラフ

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事では円グラフの記述について紹介します！

↓↓前回の記事はこちら

マーメイドで記述する円グラフ

前回の記事ではユーザージャーニーマップの記法について紹介しました。

今日は円グラフを見ていきます。円グラフは要素ごとの割合を比較する際によく使用されます。マーメイドでの記述は非常にシンプルです。

mermaid

pie
    title Favorite Fruit
    "Strawberry" : 87
    "Orange" : 42
    "Grape" : 29

宣言とタイトル

円グラフはpieで宣言されます。

titleでダイアグラムにタイトルをつけることができます。こちらは省略可能です。

mermaid

pie
    title Favorite Fruit
    "Strawberry" : 87
    "Orange" : 42
    "Grape" : 29

要素と数値

円グラフの要素と数値を記述します。要素の名前を""で囲い、:以降にデータを数字で入力します。

"LABEL": VALUE

mermaid

pie
    "a": 12
    "b": 8
    "c": 5
    "d": 3

データの表示

デフォルトではグラフの中にパーセンテージが表示され、生データは表示されません。

showDataを宣言することで、右下の要素一覧に生データを添えることができます。

mermaid

pie showData
    "a": 12
    "b": 8
    "c": 5
    "d": 3

小数の使用

マーメイドの円グラフに使用できるデータは0以上の実数です。小数にも対応しています。

Followed by positive numeric value (supported up to two decimal places)

https://mermaid.js.org/syntax/pie.html

公式ドキュメントには小数点以下第２位まで対応と記載されていますが、実際はそれ以上記述しても問題なさそうです。

mermaid

pie showData
    "a": 0.000050
    "b": 0.000030
    "c": 0.000015
    "d": 0.000005
    "e": 0

まとめ

円グラフの記述について紹介しました！

↓↓直の記事はこちら！！

参考