ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

【github】mermaid で XYChart を描いてみる

mermaid で XYChart を描いてみたのでそのとき、調べたことをここにメモします。

XYChart

マニュアル

mermaid.js.org

デフォルト

Write
```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
Preview


config1

Write
```mermaid
---
config:
    xyChart:
        width: 500
        height: 500
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
Preview


config2

Write
```mermaid
---
config:
  themeVariables:
    xyChart:
      titleColor: "#ff0000"
      backgroundColor: "#f0f8ff"
      yAxisLabelColor: "#ee82ee"
      yAxisTitleColor: "#7fffd4"
      yAxisTickColor: "#87ceeb"
      yAxisLineColor: "#ff6347"
      xAxisLabelColor: "#7fffd4"
      xAxisTitleColor: "#ee82ee"
      xAxisTickColor: "#ff6347"
      xAxisLineColor: "#87ceeb"
      plotColorPalette: "#008000, #faba63"
---
    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 12000
      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
Preview

  翻译: