最大90%OFF開始!iPad最新型が○○円引き▶️
PR

【2023最新版】Notionのデータベースからグラフを作成する方法4選【NotionChartだけじゃない!】

  • Notion内のデータベースをグラフ化したい
  • エクセルやスプレッドシートを経由せずに使いたい
  • 簡単なグラフでOK

上のような円グラフが簡単に作成できます。「Formulaの使い方の基本、if関数と四則演算」の記事で作成したデータベースを使っています。

Notionに慣れるとデータベースをグラフ化したくなりますが、Notionの標準機能だけではグラフを作れません

有用だったNotion Chartsは2022年5月にサービス終了しました。

安心してください。別の方法を4つ紹介します。お好みでご使用ください。

簡単なので、Notionカスタマイズのスパイスとして活用しましょう。

●公式からチャート機能がリリースされました。

無料版で1つ図が作成でき、有料プランでは作り放題になります。
使い方に応じて公式とサードパーティ製をうまく使い分けましょう。
» 詳細はこちら

この記事を書いた人

・iPadを使い倒すフリーランス
・妻はiPadを使う現役小学校教師
・前職は補償関連に10年以上従事
・Notion公認資格を3つ保有
 » その仕事、楽になります 

📮質問やお仕事依頼はお気軽に♪
» お問い合わせ
» プロフィール

ダイスをフォローする
機能や使い方等
セキュリティやチーム利用等
ユースケースや高度な機能
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って何?という方は以下もご覧ください。

メリットはExcelライクにデータとグラフを管理できることです。

Excelを使ったことがあれば特に迷うことなくグラフができます。表現ももちろん多彩です。

デメリットは

  • NotionにはDBやデータがないこと(貼り付けているだけ)
  • 動画の方法でも埋め込みがスマートとは言いにくい

二つを使いこなすのがベストですが、Notion以外使いたくない人には向いていません。

追記
LarkのBaseからダッシュボード機能を使うと綺麗に埋め込めました(参考)。

右下以外はNotionのブロック。かなり違和感なく仕込めます。

方法↓

こんなに自然に埋め込めました。これはNotionChartsもExcelも不要になりそうです。

NotionChartsでグラフを作る方法(2種類あり)

ややこしいのですが、「NotionCharts」という名称のサービスは2種類あります

  1. DBから作るNotionCharts(2022年5月にサービス終了)
  2. スプレッドシートから作るNotionCharts

DBから作るNotionCharts

①についてはサービス終了しているので、以下を開くと見れます。

検索でよく出てくるのはこちらです(利用者が多かった)。

NotionChartsの使い方

NotionChartsとNotionを連携

まずはNotionChartsへアクセスして、以下の3ステップでNotionChartsとNotionを連携しましょう。

グラフ化するNotionページの指定

連携が完了すると、Notionのどのページをグラフ化するかを選ぶ画面になります。該当のページにチェックを入れましょう。

選択肢が表示されていない場合は、検索ボックスでページ名を検索できます。

指定が完了したら右下の「Allow access」を押します。

ここでチェックしなかったノートは、NotionChartsでグラフ化できません(2021年10月)

追記(10月15日):NotionChartsサポートに問い合わせたところ、返事は来ておりませんが追加連携ができるように修正されていました。対応が早い。

グラフを作成する

無料版でも5つまでグラフを作れるので、ビジネス用途でない限りは充分です。「+Create Chart」を押して「Notion Table」から該当のページを指定しましょう。

データベースがない場合はこんな画面になります。データベースの指定に戻りましょう。

円グラフの場合はXに要素名のプロパティーを、Yに配分となるプロパティーを指定します。指定は何回でもできるので、色々いじってみましょう。

XとYの指定が終わると、ほぼ完成です。グラフの種類や色の有無、細かな設定を指定して好みのグラフにしましょう。

最後に、グラフ上の青いボタン「Copy Embed Url」を押してこのグラフをコピーしておきます。

Notionでデータベースを更新しても、円グラフに即時反映はしません
グラフを更新する場合にはブラウザの更新ボタンか上部の「Refresh Chart Date」を押しましょう。

Notionのページに貼り付ける方法

貼りたい場所に先ほどのURLを貼り付けして、「Create embed」を選択します。

このように円グラフが表示されます。サイズを変更することも可能です。

データベースの中身を変更した場合は、 グラフをクリックし左上のリフレッシュボタンを押すと反映されます。

Notion Chartsの技術的制限

Notion Chartsには制限があり、最小割合が1%以下の場合は表示されません(2021年11月現在)。

下の図では1要素だけ小さな値を入れて合計100になるように割り振っています。

データベースで指定した数字
実際の数字(数字が書き変わる)
  • 1%以下は表示されていません
  • 表示されていなくても円グラフの合計を100%に合わせる仕様
  • 他の項目へ自動的に割り振られる(データベースでは20%のはずが、20.2%に)。

小数点以下まで正確なデータを出したい場合には向いていません。個人で使用する場合や、概要の把握程度として使いましょう。

スプレッドシートから作るNotionCharts

スプレッドシートからもグラフは作れます。
※NotionのDBから生成するわけではありません。

データベースをGoogleスプレッドシートで作成

パーソナルを指定して、「空白」を選択、新規でスプレッドシートを作成しましょう。

今回使うデータはこちら。マネーフォワードで楽天証券口座を管理する方法の方法でWEBページからコピペしました。

NotionChartsでグラフを作る場合には、指定のフォームにする必要があります。

指定のフォームはページ内 以下の赤枠から確認できます。

円グラフの場合、青枠の通りにスプレッドシートを作ればOKです。

それでは、上記のフォームと同様の形にするため、以下の通りスプレッドシートを編集していきます。

  • 赤枠を移動して円グラフフォームに合わせる(名称と数値)
  • 青枠を編集して数字のみにする(Ctrl+Fで置換)
  • シート名を編集する(そのままでもOK)

次に、スプレッドシートを保存して、公開設定にします。

保存後に、右上の「共有」ボタンを押すと変更できます。

これでスプレッドシートの準備ができました。

URLを使用するので開いたままにしておきましょう。

NotionChartsの設定

スプレッドシートの作成が終わったら、NotionChartsの登録に移ります。

「CREATE A CHART」を押すとページ中盤にスライドするので、項目を埋めていくだけで完成します。

以下の図の通り、赤・黄・青をそれぞれ埋めていきましょう。

それぞれ以下の項目をコピペします。

赤枠はスプレッドシートURLの緑部分をコピペ

/d/ と/edit の間の文字列をコピペしましょう

画像流用です、すみません。
左下黄色枠、スプレッドシートのシート名をコピペしましょう。

グラフ化したい部分を囲むと、左上に範囲が表示されるので、こちらをコピペします。
タイトル行を含まないように注意してください。

完成図がこちら。

このあとは流れ作業。もう少しです。

作りたいグラフの種類に合わせて「CHART TYPE」を選択しましょう。
※Line(棒グラフ)の場合は縦横の要素をさらに選択します。

今回はBlueのみで作成します。
各要素を色分けしたい場合には、リストからカラーを選択しましょう。

流れ作業なので駆け足で来ましたが、これで完了です。

Notionのページに貼り付ける

貼り付けの際は「Create embed」(埋め込みを作成)の選択を忘れずに。

周りの枠で大きさを変える事ができます。

順番はスプレッドシートに依存するので、変更する場合はスプレッドシートを編集しましょう。

スプレッドシートの更新はNotion内の埋め込みに反映されます。
スクレイピングのIMPORTXML関数などを使えば、さらに効率よくグラフが作成できるかと思います。

NotionChartsでグラフをつくる方法 まとめ

サクッとグラフができるので、簡単な図でよければ有用な選択肢です。

それぞれメリット・デメリットがあるので、状況に合わせて使ってみてください。

フォロワー限定テンプレ準備中🎲
フォローしてお待ちください

更新情報

最新版 GTD&7つの習慣のINBOXタスク管理を公開しました。

» 趣味に全力するためのNotionタスク管理テンプレート

Notion使いたいのに電波がねえよ!!って時は。

タウンWi-Fiアプリは、接続のたびにメールアドレスなどを入力するフリーWi-Fiのストレスを排除してくれます。

Wi-FiモデルのiPadとも非常に相性がよく、無料なので使ってみてください。

面倒なログインなしで快適にNotionを楽しめる。
総ダウンロード数1,000万以上の人気アプリ

10万円クラスの端末を使っている人は、会員専用Wi-Fiが使えるスマホ保険もあるので、活用してみてください。

仕事がちょっと楽になります

コメント