• https://notion-plotly.netlify.app/ を使ったグラフURLを作成するサンプルです
• 解説記事: Notionのデータベースのデータを可視化するグラフURLを作成する | Web Scratch

使い方

のデータをグラフ化する手順は、次のような流れです。

1. 参照用の を作成します
   • このデータベースは、サンプルデータベースの値を集めるためだけに使います
2. に 集計用 という行を追加します
   • この行にグラフ化したいサンプルデータベースの値を集めていきます
3. に へのRelationを追加します
4. の全ての行の のRelationに 集計用 への参照を設定します
   • この時 のフィルターで 集計用 への参照をもつものだけ表示しておくと、次からサンプルデータベースに値を追加したときに自動的に参照が追加されます
   • フィルターの仕組みの解説: Notionで「ほぼ日」手帳作ってみた📖 #まいにちNotion Ep.12 - YouTube
5. にRollupを追加し、グラフ化したいデータを集める
   • この時のRollupの計算は”オリジナルを表示する”を選ぶ
6. に関数を追加し、グラフURLを作る
   • "[<https://notion-plotly.netlify.app/pie.html?values=>](<https://notion-plotly.netlify.app/pie.html?values=>)" + prop("数値") + "&labels=" + prop("支出項目")
   • 📝 labelsに & や特定の文字が入れられないため、 replaceAll などを使って削る
7. 作成したグラフURLをクリックするとグラフが見られる
   1. EmbedでグラフURLを埋め込むとNotion上でも表示できる(自動更新はされない)

https://notion-plotly.netlify.app/pie.html?values=30000,100000,100000,10000,5000,5000,10000,50000&labels=食費,家賃,貯蓄,サブスクリプション費,光熱費,通信費,日用品,その他

参照用のデータベース

インデックスデータベース

グラフ化したいデータベース

サンプルデータベース

棒グラフのサンプル