iPad mini 6も対象のAmazonタイムセール開催中

【Notion】スプレッドシートからグラフを作る方法(二種類あるので注意)

  • Notion上にスプレッドシートからグラフを作りたい!
  • NotionCharts(詳細記事はこちら)の無料枠を使い切ってしまった
  • 他者との共有にスプレッドシートを使用するので流用したい!

スプレッドシートからもグラフは作れます。

Notion Chartsという外部サイトはふたつあり、基本的には以下で記事で使用したサイトの方がグラフ作成は簡単です。

上記の理由に当てはまる場合に、この記事の方法をお試しください。

この記事を書いた人

・iPad miniが大好き
・妻は現役小学校教師
・子供とおもちゃで遊ぶのが至福
・iPadで時間を確保→スキル磨き→脱サラ
・iPadでプログラムとノーコードを0から習得

名前をタップすると、Notionで作成したプロフィールに飛びます。

📮 質問やご依頼はお気軽に♪

iPadブログ管理人:まめズボをフォローする
スポンサーリンク

まずはデータベースをgoogleスプレッドシートで作成

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

こちらは今回スプレッドシートに貼り付けるWEBページ
今回はWEBページのデータをスプレッドシートにコピペする方法を紹介します。
マネーフォワードの資産ページを基にグラフを作成してみます。
https://parlor-dice.com/investment_money_kanri/

スプレッドシートにペタッと貼ります。

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

指定のフォームは以下のボタンから確認することができます。

上記はnotionChartsの入力画面から参照できます。今は開かなくても大丈夫です。
円グラフ以外を作るときには参考にしてください。

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

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

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

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

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

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

スポンサーリンク

NotionChartsの設定

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

「CREATE A CHART」を押すとデータ選定画面にスライドするので、項目を埋めていくだけで完成します。

赤・黄・青をそれぞれ埋めていきましょう。

それぞれ以下の項目をコピペしていきましょう。

赤枠はスプレッドシートURLの緑部分をコピペ
/d/ と/edit の間の文字列をコピペしましょう
画像流用です、すみません!!
黄色枠のみ見ていただき、スプレッドシートのシート名をコピペしましょう。
グラフ化したい部分を囲むと、左上に範囲が表示されるので、こちらをコピペします。
タイトル行を含まないように注意してください。
 
このあとは流れ作業です。もう少しです!

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

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

最後は流れなので駆け足で来ましたが、これで完了です。

スポンサーリンク

notionのpageに貼り付ける

それではnotionのページに貼り付けしてみましょう。

貼り付けの際は「Create embed」の選択を忘れずに。

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

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

管理人
管理人

一度作成してしまえば、スプレッドシートを更新することでnotion内グラフを更新可能です。
データ元がスプレッドシートなので活用の幅は広そうですね。
IMPORTXML関数などを使えば、さらに効率よくグラフが作成できるかと思います。

スポンサーリンク

notioncharts スプレッドシートver のまとめ

以上、googleのスプレッドシートからnotion内にグラフを作成する方法でした。

スプレッドシートを常用している場合にはこちらが楽かもしれませんね。

スプレッドシートではなく、notionのデータベースからグラフを作りたい場合はこちらの記事をご参照ください。

created by Rinker
¥780(2022/09/25 22:56:17時点 Amazon調べ-詳細)

【Amazonの電子書籍読み放題サービス】を使って無料で読めます(2022年6月現在)。

\ 30日間0円でお試しできる! /

Notionはノーコードと呼ばれるITスキルの一つ。Notionではできないアイディアの具現化や起業に興味があれば、他のノーコードツールも試してみてください。

» 挫折率の高いプログラミングよりも「ノーコード」でアプリをつくろう

※ノーコード = コーディングせずにWebアプリを作るITスキル

タイトルとURLをコピーしました