Obsidian：csvファイルで棒グラフを描く

Chartsの最終段階です。

Charts

棒グラフが描けるのはわかりましたが、データの入力が面倒くさい。そもそもデータはcsv形式で書きためるものです。グラフを描くときに再入力しては手間でしかない。

となるとcsvを読み込むタイプがほしくなります。

csvファイル

csvとは「コンマ区切り形式」のこと。データを , で区切ったテキストファイルです。スプレッドシートなら出力形式として用意されている。汎用性が高い。

感染者数,京都,大阪,奈良,和歌山
01/28, 10.91, 8.88, 11.51, 13.47
02/04, 12.31, 9.36, 13.91, 16.31

こんな感じですね。文字も数字もただ並べられている。

このファイルを covid.md という名前にします。

dataviewスクリプト

dataviewとChartsのプラグインがインストールされていれば：

```dataviewjs
const csv = await dv.io.csv("covid.md")
const fig = "fig1. "
const type = "bar"
const color = ["navy", "darkred", "orange"]

const s = Object.keys(csv.values[0])
const t = fig + s.shift()
const d = csv.values.map(x => Object.values(x))
const Chart = {type: type, data:{datasets:[]}}
Chart.data.labels = s
i = 0
for(k in d){
  Chart.data.datasets[k] = {}
  Chart.data.datasets[k].label = d[k].shift()
  Chart.data.datasets[k].data = d[k]
  Chart.data.datasets[k].backgroundColor = color[i++%3]
}
window.renderChart(Chart, this.container)
dv.span("<center style='font-size:12px;'>" + t + "</center>")
```

このスクリプトをテキスト中に埋め込んでください。

すると上図のような棒グラフが描かれます。日付をタップすると非表示にもできます。

スクリプト内の変数typeをbarからlineに書き換えると：

折れ線グラフに早変わり。見やすい方を選んでください。

プロパティ型

変数をプロパティで設定できるようにします。

---
csv: covid.md
fig: 図1.
type: bar
---

```dataviewjs
const csv = await dv.io.csv(dv.current().csv)
const fig = dv.current().fig
const type = dv.current().type
const color = ["navy", "darkred", "orange"]

const s = Object.keys(csv.values[0])
const t = fig + s.shift()
const d = csv.values.map(x => Object.values(x))
const Chart = {type: type, data:{datasets:[]}}
Chart.data.labels = s
i = 0
for(k in d){
  Chart.data.datasets[k] = {}
  Chart.data.datasets[k].label = d[k].shift()
  Chart.data.datasets[k].data = d[k]
  Chart.data.datasets[k].backgroundColor = color[i++%3]
}
window.renderChart(Chart, this.container)
dv.span("<center style='font-size:12px;'>" + t + "</center>")
```