上のような円グラフが簡単に作成できます。「Formulaの使い方の基本、if関数と四則演算」の記事で作成したデータベースを使っています。
Notionに慣れるとデータベースをグラフ化したくなりますが、Notionの標準機能だけではグラフを作れません。
有用だったNotion Chartsは2022年5月にサービス終了しました。
安心してください。別の方法を4つ紹介します。お好みでご使用ください。
簡単なので、Notionカスタマイズのスパイスとして活用しましょう。
一人社長がより事業に集中できる環境づくり。
- リソース不足で業務委託していませんか？
- やることが多すぎて気が散っていませんか？
Notionの基礎はこちらから
» 初心者でも3日で使いこなせるNotion完全ガイド【2024年版】
» 基本知識を学ぶ！Notionを動画で学ぼう！
Notionでグラフを作成する方法3選
以下の動画で3つ全ての使い方を解説しています。
動画内で紹介するプロンプトやそれぞれのメリット・デメリットは以下の記事をご覧ください。
Mermaid記法とNotion AIを使ったグラフ作成
※使い方はこちらの動画をご覧ください。
プロンプト
上記のテーブルからMermaid記法で円グラフを作成して。
・項目は「銘柄」
・「金額」をパーセント表示で
pie title ポートフォリオ
"全世界株式" :50
"SPY" :50上のコードはNotionのコードブロックに入力してください。ビジュアルだけ表示もブロック左上から選べます。
メリットは全てNotion標準機能で解決していることです。サービス終了やいきなり使えなくなる懸念がありません。
デメリットは3点
- DBから変換が必要
- Notion AIに契約していないとコード入力が必要
- 自動更新ではない
今後Notion AIがDBのデータを読み取るようになれば、飛躍的に使いやすくなると思います。
Notion2Chartsを使ったグラフ作成
※使い方はこちらの動画をご覧ください。
メリットはDBから直接グラフが作成できることです。変更も反映できます。
グラフの種類や表現も豊富で、プレゼンなどには最適です。
デメリット
- 無料アカウントはグラフ一つ
- 外部ソフトなので終了の可能性がある
有料にしてまでグラフを作成したいケースにどれほど需要があるのか…となるとサービス継続にも若干の不安があります。終了したケースがあるので心配です。
Larkを使ったグラフ作成
※使い方はこちらの動画をご覧ください。
Larkって何？という方は以下もご覧ください。
» Larkの解説とNotionとの比較【ついにiPadだけで仕事できる日が…】
メリットはExcelライクにデータとグラフを管理できることです。
Excelを使ったことがあれば特に迷うことなくグラフができます。表現ももちろん多彩です。
デメリットは
- NotionにはDBやデータがないこと（貼り付けているだけ）
- 動画の方法でも埋め込みがスマートとは言いにくい
二つを使いこなすのがベストですが、Notion以外使いたくない人には向いていません。
追記
LarkのBaseからダッシュボード機能を使うと綺麗に埋め込めました（参考）。
右下以外はNotionのブロック。かなり違和感なく仕込めます。
方法↓
こんなに自然に埋め込めました。これはNotionChartsもExcelも不要になりそうです。
NotionChartsでグラフを作る方法（２種類あり）
ややこしいのですが、「NotionCharts」という名称のサービスは２種類あります。
- DBから作るNotionCharts（2022年5月にサービス終了）
- スプレッドシートから作るNotionCharts
DBから作るNotionCharts
①についてはサービス終了しているので、以下を開くと見れます。
検索でよく出てくるのはこちらです（利用者が多かった）。
NotionChartsの使い方
NotionChartsとNotionを連携
まずはNotionChartsへアクセスして、以下の３ステップでNotionChartsとNotionを連携しましょう。
グラフ化するNotionページの指定
連携が完了すると、Notionのどのページをグラフ化するかを選ぶ画面になります。該当のページにチェックを入れましょう。
選択肢が表示されていない場合は、検索ボックスでページ名を検索できます。
指定が完了したら右下の「Allow access」を押します。
グラフを作成する
無料版でも5つまでグラフを作れるので、ビジネス用途でない限りは充分です。「＋Create Chart」を押して「Notion Table」から該当のページを指定しましょう。
データベースがない場合はこんな画面になります。データベースの指定に戻りましょう。
円グラフの場合はXに要素名のプロパティーを、Yに配分となるプロパティーを指定します。指定は何回でもできるので、色々いじってみましょう。
XとYの指定が終わると、ほぼ完成です。グラフの種類や色の有無、細かな設定を指定して好みのグラフにしましょう。
最後に、グラフ上の青いボタン「Copy Embed Url」を押してこのグラフをコピーしておきます。
Notionのページに貼り付ける方法
貼りたい場所に先ほどのURLを貼り付けして、「Create embed」を選択します。
このように円グラフが表示されます。サイズを変更することも可能です。
データベースの中身を変更した場合は、 グラフをクリックし左上のリフレッシュボタンを押すと反映されます。
Notion Chartsの技術的制限
Notion Chartsには制限があり、最小割合が1％以下の場合は表示されません（2021年11月現在）。
下の図では１要素だけ小さな値を入れて合計１００になるように割り振っています。
- １％以下は表示されていません
- 表示されていなくても円グラフの合計を100%に合わせる仕様
- 他の項目へ自動的に割り振られる（データベースでは20%のはずが、20.2%に）。
小数点以下まで正確なデータを出したい場合には向いていません。個人で使用する場合や、概要の把握程度として使いましょう。
スプレッドシートから作るNotionCharts
スプレッドシートからもグラフは作れます。
※NotionのDBから生成するわけではありません。
データベースをGoogleスプレッドシートで作成
パーソナルを指定して、「空白」を選択、新規でスプレッドシートを作成しましょう。
今回使うデータはこちら。マネーフォワードで楽天証券口座を管理する方法の方法でWEBページからコピペしました。
NotionChartsでグラフを作る場合には、指定のフォームにする必要があります。
指定のフォームはページ内 以下の赤枠から確認できます。
円グラフの場合、青枠の通りにスプレッドシートを作ればOKです。
それでは、上記のフォームと同様の形にするため、以下の通りスプレッドシートを編集していきます。
- 赤枠を移動して円グラフフォームに合わせる（名称と数値）
- 青枠を編集して数字のみにする（Ctrl＋Fで置換）
- シート名を編集する（そのままでもOK）
次に、スプレッドシートを保存して、公開設定にします。
保存後に、右上の「共有」ボタンを押すと変更できます。
これでスプレッドシートの準備ができました。
NotionChartsの設定
スプレッドシートの作成が終わったら、NotionChartsの登録に移ります。
「CREATE A CHART」を押すとページ中盤にスライドするので、項目を埋めていくだけで完成します。
以下の図の通り、赤・黄・青をそれぞれ埋めていきましょう。
それぞれ以下の項目をコピペします。
/d/ と/edit の間の文字列をコピペしましょう
画像流用です、すみません。
左下黄色枠、スプレッドシートのシート名をコピペしましょう。
グラフ化したい部分を囲むと、左上に範囲が表示されるので、こちらをコピペします。
タイトル行を含まないように注意してください。
完成図がこちら。
このあとは流れ作業。もう少しです。
作りたいグラフの種類に合わせて「CHART TYPE」を選択しましょう。
※Line（棒グラフ）の場合は縦横の要素をさらに選択します。
今回はBlueのみで作成します。
各要素を色分けしたい場合には、リストからカラーを選択しましょう。
流れ作業なので駆け足で来ましたが、これで完了です。
Notionのページに貼り付ける
貼り付けの際は「Create embed」（埋め込みを作成）の選択を忘れずに。
周りの枠で大きさを変える事ができます。
順番はスプレッドシートに依存するので、変更する場合はスプレッドシートを編集しましょう。
スプレッドシートの更新はNotion内の埋め込みに反映されます。
スクレイピングのIMPORTXML関数などを使えば、さらに効率よくグラフが作成できるかと思います。
NotionChartsでグラフをつくる方法 まとめ
サクッとグラフができるので、簡単な図でよければ有用な選択肢です。
それぞれメリット・デメリットがあるので、状況に合わせて使ってみてください。
Notion使いたいのに電波がねえよ！！って時は。
タウンWi-Fiアプリは、接続のたびにメールアドレスなどを入力するフリーWi-Fiのストレスを排除してくれます。
Wi-FiモデルのiPadとも非常に相性がよく、無料なので使ってみてください。
10万円クラスの端末を使っている人は、会員専用Wi-Fiが使えるスマホ保険もあるので、活用してみてください。
コメント