0. はじめに
自分は Qiita でいわゆるグラフ（折れ線グラフや棒グラフ）を描くことが多いのですが，簡単なものでも EXCEL で作成したグラフをビットマップで貼り付けるしかないと思っていました。しかし，最近 Qiita でもサポートされている mermaid でも xychart といういわゆるグラフ（折れ線グラフや棒グラフ）を描く機能の β 版がテストされていることを知りました。
ということで，どこまで出来るのかテストしてみました。
1. こんな折れ線グラフを描きたい
EXCELで作成したグラフをビットマップで貼り付けています。
ただし，グラフの下側にある図のタイトルだけは PlantUML で挿入しています。
※詳しいテクニックは下記の記事を参照下さい。
Qiitaのmarkdownで画像にキャプション（タイトル）を付ける方法 - Qiita
2. xychart β版で折れ線グラフを描く
mermaid を用いると，折れ線グラフは割と綺麗に描けます。ただし，データのX軸座標は等間隔である必要があります。
グラフの文字の大きさや色は細かく調整可能です。
```mermaid
%%{
init:{
"xyChart":{
"width":640,
"height":400,
"titleFontSize":17,
"xAxis":{
"titleFontSize":17,
"labelFontSize":17,
"axisLineWidth":1,
"tickWidth":1,
"showLabel":true
},
"yAxis":{
"titleFontSize":17,
"labelFontSize":17,
"axisLineWidth":1,
"tickWidth":1,
"showLabel":true
}
},
"themeVariables":{
"fontFamily":"monospaced",
"xyChart":{
"plotColorPalette":"red"
}
}
}
}%%
xychart-beta
title "図２ 四則演算で求める数と実現可能な組み合わせの数"
x-axis "四則演算で求める数" 0 --> 50
y-axis "実現可能な組み合わせ数" 0 --> 60
line [55, 55, 55, 40, 39, 42, 42, 44, 45, 47, 43, 37, 38, 32, 27, 40, 35, 37, 28, 33, 35, 26, 15, 12, 31, 22, 22, 13, 18, 15, 32, 15, 20, 15, 14, 23, 28, 20, 4, 10, 23, 11, 20, 10, 7, 16, 9, 3, 28, 21, 23]
```
3. こんな棒グラフを描きたい
PlantUML のインライン SVG スプライトを用いて＊無理やり＊作成した棒グラフです。
※詳しいテクニックは下記の記事を参照下さい。ただしオススメはしません。
QiitaのmarkdownでSVGを使って作図する - Qiita
4. xychart β版で棒グラフを描く
mermaid を用いると棒グラフも綺麗に描けます。
これは特定の棒の色を変えたのではなく，ピンク色 #ffc0cb の棒グラフと赤色 #ff0000 の棒グラフの二つを重ねています。色は plotColorPalette にて，個数分の色を羅列すれば良いようです。赤色 #ff0000 の棒グラフは，強調箇所以外では見えないように値をマイナスにしています。
```mermaid
%%{
init:{
"themeVariables":{
"fontFamily":"monospaced",
"xyChart":{
"plotColorPalette":"pink,red"
}
}
}
}%%
xychart-beta
title "図２ 四則演算で求める数と実現可能な組み合わせの数"
x-axis "四則演算で求める数" [0,"","","","",5,"","","","",10,"","","","",15,"","","","",20,"","","","",25,"","","","",30,"","","","",35,"","","","",40,"","","","",45,"","","","",50]
y-axis "実現可能な組み合わせ数" 0 --> 60
bar [55, 55, 55, 40, 39, 42, 42, 44, 45, 47, 43, 37, 38, 32, 27, 40, 35, 37, 28, 33, 35, 26, 15, 12, 31, 22, 22, 13, 18, 15, 32, 15, 20, 15, 14, 23, 28, 20, 4, 10, 23, 11, 20, 10, 7, 16, 9, 3, 28, 21, 23]
bar [-5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, 35, -5, -5, -5, 31, -5, -5, -5, -5, -5, 32, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5]
```
全てのX軸目盛りを表示させると重なって鬱陶しいので間引いて表示させています。一見，間引いた目盛りは同じ空文字列に見えますが，目盛りの値が重複するとエラーになるので，実は見えない文字を組み合わせて全ての目盛りの値が重複しないようにしています。
| 文字コード | 説明 |
|---|---|
| U+200B | ZERO WIDTH SPACE |
| U+200C | ZERO WIDTH NON-JOINER |
| U+2060 | WORD JOINER |
| U+2061 | FUNCTION APPLICATION |
| U+2062 | INVISIBLE TIMES |
| U+2063 | INVISIBLE SEPARATOR |
| U+2064 | INVISIBLE PLUS |
0～50 までの間の見えない目盛りは 40 個ありますが，見えない Unicode 文字 7 種類を 2 個ずつ使用すれば 49 通りの重複しない見えない文字列が作れるので，このうち 40 個を使っています。
5. まとめ
今後の課題をまとめると下記のようになるでしょうか？
- グラフのタイトルが上側に固定されており，下側に表示できません
※他のチャートも同様なので改善される見込みは薄いように思います - 折れ線グラフの線の太さを変更できません
- 棒グラフの棒の幅を変更できません
- 棒グラフの値がゼロのときも高さがあります（マイナスの値にしないと棒が消えません）
- X,Y 軸の目盛り間隔を指定できません
- グリッド表示できません
- 凡例を表示できません