Notionでグラフを表示させる方法【スプレッドシート、NotionCharts、Mermaid】

※当サイトは、アフィリエイト広告を利用しています
Notion
スポンサーリンク
Notionユーザー
Notionユーザー

・Notionのデータベースの内容をグラフで表示させたい

・スプレッドシートで作成したグラフをNotionに表示させたい

こういったご要望にお応えします!

今回はNotionに関する記事です。

最近企業などの大きな組織でも取り入れられているNotion。

その中で、「Notionの中でグラフを表示させたい」ということもあるかと思います。

しかし残念ながらNotionの純正の機能でグラフを表示させることはできません。

そのため今回は、「スプレッドシートのグラフを埋め込む」方法、「外部ツールでNotionのデータベースからグラフを作成する」方法、「Mermaid」を紹介したいと思います。

会議やプレゼンなどでグラフが欲しい場合あると思いますので今回の記事を参考にしてNotionにグラフを表示させてみてください!

会議の議事録の作成方法はこちら。

Notionで自動作成可能な議事録を管理する方法【テンプレートあり】

スポンサーリンク

Notionの書籍を参考にしたい方におすすめ

Notionに関する書籍を参考にしたい方はこちらの本がおすすめです。

初心者にとっても分かりやすくNotionの全体像を解説してあります。

さらに私のNotionに関する記事を基にした書籍も発売中です。

これからNotionを始めたい方、Notionでできることを網羅的に知りたい方はぜひ参考にしてみてください。

スポンサーリンク

GoogleスプレッドシートのグラフをNotion内に埋め込む

まずNotionにグラフを表示させる方法の1つ目として、「スプレッドシート内のグラフを埋め込む」です。

Notion内でグラフを作成する機能がまだ実装されていないのでスプレッドシート内で作成したグラフを利用します。

手順としては以下になります。

  1. Googleスプレッドシート内でグラフを作成する
  2. 共有用のURLをコピーする
  3. Notion内の必要な箇所で埋め込む

実際にやってみましょう。

Googleスプレッドシート内でグラフを作成する

まずはGoogleスプレッドシート内でグラフを作成します。

試しに簡単な売上グラフをスプレッドシートで作成してみました。

スプレッドシートグラフ作成

共有用のURLをコピーする

続いては作成したスレッドシートの共有用URLをコピーします。

まずは画面右上の「共有」をクリックします。

すると、こんな画面が出てきます。

共有設定画面

デフォルトでは、アクセスが「制限付き」となっています。

アクセス権が付与されているユーザーのみがアクセスできるようになっています。

これを変更します。

アクセスを「制限付き」から「リンクを知っている全員」に変更します。

さらに役割を「編集者」にしておきます。

こうすることで、どのユーザーからもこのシートを確認、編集できるようになります。

NotionのアカウントをGoogleアカウントで作成している場合は、アクセスを自分だけに設定することは可能です。

まとめるとこんな感じです。

  • NotionアカウントをGoogleアカウントで作成しているかつ、そのアカウントでスプレッドシートを作成すればアクセス制限をつけたまま埋め込みができる
  • NotionアカウントをGoogleアカウントで作成していない、または他の人にも見てもらう場合はアクセス権を「リンクを知っている全員」に変更する
  • Notion内の埋め込み先で編集もする場合は役割を「編集者」に変更する

設定が完了したら、「リンクをコピー」をクリックします。ブラウザのURLでも大丈夫です。

Notion内の必要な箇所で埋め込む

リンクをコピーできたらNotionに移動します。

埋め込みたい場所で「埋め込み」ブロックを追加します。

埋め込みブロック追加

ショートカット「/emb」ですぐに埋め込みブロックを表示できます。

するとリンクを埋め込むポップアップが表示されるので先ほどコピーしたリンクをペーストします。

リンク埋め込む

「リンクを埋め込む」をクリックすると、スプレッドシートの内容が表示されます。

スプレッドシートNotionに埋め込み

スプレッドシート全体がNotion内に埋め込まれました。

埋め込まれた中で実際に数値を更新することも可能です。

スプレッドシートのグラフ部分のみを埋め込むことも可能

先ほど紹介した方法は、スプレッドシート全体を埋め込む方法でした。

更新したり、別のシートにも移動はできますが、見た目が少し気になります。

会議などのプレゼンでグラフだけを表示させたい場合、先ほどの方法だと見栄えが悪いです。

それを回避するためにグラフ部分のみを表示させる方法を紹介します。

スプレッドシート内のグラフ右上の3点線をクリックし、「グラフを公開」を選択します。

グラフを公開

すると、「ウェブに公開」設定の画面が出てきます。

「ウェブに公開」設定

必要な設定は2箇所です。

「埋め込む」を選択し、対象のグラフが選択されていることを確認します。

対象のグラフのタイトルが選択されていることを確認できたら、その下の埋め込みリンクをコピーします。

あとは先ほどと同じで「埋め込み」ブロックを追加してリンクをペーストします。

見た目はこんな感じになります。

グラフだけ表示

この方法だと、グラフだけが表示されるので見た目がすっきりします。

しかし、Notion内での更新作業はできません。

スプレッドシート内で更新した場合はその更新内容は反映されます。

用途に合わせて使い分けてみてください。

Mermaidを使ってグラフ作成

最後に紹介するのが「Mermaid」記法でのグラフ作成です。

Notionのコードブロックでは、プログラミング言語以外に「Mermaid」記法を入力することができます。

Mermaid記法とは、あるコード規則によってフローチャートやシーケンス図、円グラフなどを作成することができるものです。

Mermaid記法紹介
Mermaidで円グラフ

デザインはシンプルですが、テキストから簡単にグラフを作成することができます。

詳しい作成方法は以下記事を参考にしてみてください。

Notionのmermaid記法で直感的なグラフを作成しよう | エンジニア必見

関数を使ってグラフ表示させることも可能

関数機能を使ってデータベース内の数値をグラフ表示させることもできます。

データベース内の数値を関数でグラフ化

このように「〜個」などのように好きな単位を設定することもできます。

リレーション先のデータを数値化

また、リレーション先のデータもグラフ数値化させることができます。

より柔軟にグラフを作成することができるようになります。

詳しくはこちらの記事を参考にしてみてください。

Notionの関数機能を使ってグラフを作成する方法

NotionChartsでデータベースからグラフを作成する

続いては、Notionのデータベースの内容からグラフを作成する方法です。

外部サービスの「NotionCharts」というものを使用します。

NotionChartsはNotion内で作成したデータベースからグラフを作成できるサービスです。

無料で5つまで作成することができます。

ざっくり作成手順は以下になります。

  1. NotionChartsとNotionを連携させる
  2. 対象のワークスペース、ページを選択する
  3. NotionCharts内でグラフの設定をする
  4. Notion内にグラフを埋め込む

※2024年1月現在、NotionChartsは利用できなくなっておりました。サービスが終了したみたいです。

代替サービスがいくつかあるみたいなので、使いやすそうなものを後日紹介しようと思います。

NotionChartsとNotionを連携させる

まずはNotionChartsとNotionを連携させます。

こちらからNotionChartsのサイトに移動してアカウント登録します。

私はNotionChartsとNotionで同じGoogleアカウントでアカウント登録したので自動的に連携されました。

そうでない場合は、ページに従ってNotionと連携させます。

アカウント登録完了画面

これでアカウント登録完了です。

対象のワークスペース、ページを選択する

続いてはNotionのグラフ化したいデータベースがあるワークスペース、ページを選択します。

Add Notion Page

画面右上の「Add Notion Page」をクリックします。

するとワークスペース、ページを選択する画面に移動します。

ワークスペース選択
ページ選択

ここで対象のデータベースがあるワークスペース、ページを選択します。

選択できたら「アクセスを許可する」をクリックします。

これで連携が完了し、対象ページも選択できました。

ちなみに今回はテスト用に簡易的な家計簿のデータベースを作成しました。

家計簿データベース

月毎のカテゴリーごとの支出をデータベースに入力しています。

家計簿の作成方法はこちらの記事で紹介しています。

年間収支や買ったもののカテゴリーごとの支出の管理・自動集計ができる機能が備わっています。

こちらで作成されたデータベースをグラフに表示するとさらに収支の分析がしやすくなります!

NotionCharts内でグラフの設定をする

ここからNotionCharts内でグラフの設定を行なっていきます。

先ほど選択したページ内にデータベースが存在しているとグラフが作成できるようになります。

グラフ作成

+Create Chart」をクリックして作成画面に移動します。

まずはデータベース選択が求められるので対象のデータベースを選択します。

データベース選択

データベースを選択すると、グラフの設定画面が出てきます。

グラフ設定

英語の設定画面なので少しわかりづらいところもありますが、一度覚えてしまえば大丈夫です。

X Axis」と「Y Axis」にそれぞれプロパティを選択します。

Chart Type」でグラフの種類を選択できます。

Colors」や「Settings」でグラフの色やタイトルの表示・非表示やダークモードの設定ができます。

Notion内に埋め込む

設定が完了したら画面上の「Copy Embed Url」をクリックしてコピーします。

今までと同じ要領で埋め込みたい場所で埋め込みブロックにURLを貼り付けます。

表示されたグラフはこちら。

NotionChartsのグラフ埋め込み

同期されているのでデータベースで数値を更新した場合、グラフ上部の「Reflesh」をクリックすると更新されます。

5つ以上グラフを作成する場合は有料プランに

5つまでのグラフは無料で作成できますが、それ以上は有料プランに入る必要があります。

月額$3.99になります。

Notionのデータベースをグラフ化する方法は今のところNotionCharts一択かなと思うので多く作成する予定がある場合は有料プランに入ったほうが良いです。

Notionの標準機能でグラフ化が可能になることを期待

いかがだったでしょうか。

Notionにグラフを表示させる方法をいくつか紹介しましたが、やはりNotionの標準機能で備わっていると便利ですよね。

日々素晴らしいアップデートがものすごいテンポ感で進んでいるNotion。

データベースのグラフ化もそのうち実装されると思いますのでその際は記事で紹介します。

それまでは今回の記事で紹介した方法をぜひ試してみてください。

データが視覚的に分かりやすくなり、プレゼンなどに活用できるかと思います!

Notionの書籍を参考にしたい方におすすめ

Notionに関する書籍を参考にしたい方はこちらの本がおすすめです。

初心者にとっても分かりやすくNotionの全体像を解説してあります。

さらに私のNotionに関する記事を基にした書籍も発売中です。

これからNotionを始めたい方、Notionでできることを網羅的に知りたい方はぜひ参考にしてみてください。

Notion
シェアする
エンせいをフォローする
スポンサーリンク
エンせいログ
タイトルとURLをコピーしました