liquidjumper Googleスプレッドシート,アプリ/ネットサービス ブログにも埋め込めるGoogle スプレッドシートのグラフの使い方

ブログにも埋め込めるGoogle スプレッドシートのグラフの使い方

spreadsheet-graph_topimage

GoogleのWebベースのオフィススイート Gスイート の中の一つ 

Googleスプレッドシートの紹介をしたいと思います。

GスイートはGoogleドライブ内でのサービスでなので、「スプレッドシート」以外の「ドキュメント」、「スライド」、「Gmail」など他のGスイート群との連携も取れて便利なのが特徴ですが、その中でもスプレッドシートのグラフに限定して使い方を説明します。

とても簡単にグラフが作成出来て表示の見た目の変更も簡単、そしてGoogleドライブの成せる技なのでしょうか完成したグラフを簡単に自分のブログやHPに乗せることが出来てしまいます。

画像としてHPに埋め込む事ができ、元のデータを変更すると埋め込んだ画像も自動で変更されるので、ブログ以外にも天候などの日々変わるデータの表示などにも使えます。

スプレッドシートのグラフを表示する

血圧の計測記録です。これをグラフにします。

ketuatuhyou


グラフにするエリアを選択しますTime以外を選択しました。

[Ctrl]を押しながら選択で追加選択できます。

ketuatuhyou_select


メニューバーの[挿入]> グラフ を選択します。

グラフ選択


グラフが生成されました。

右側に表示されたグラフエディタでグラフの表示を変更出来ます。

グラフ生成

スプレッドシートで使えるグラフの種類

グラフの種類を選べます。

グラフ種類

グラフ例:

積み上げ縦棒グラフ

積み上げ縦棒グラフ
積み上げ縦棒グラフ

3D円グラフ

3D円グラフ
3D円グラフ

レーダーチャート

レーダーチャート
レーダーチャート

散布図

散布図
散布図

その他に株価のロウソク足チャートやマップチャート、組織図などたくさん種類があります。

今回は折れ線グラフを選びます。

数値が入力されてない空欄を補完して線をつなげる

血圧測定の数値が入ってない空白の枠があると、折れ線グラフがつながらず途切れてしまっています。

数値が入力されてない空欄があるため

spreadsheet-graph空欄


グラフの線が繋がってません

線が繋がってない

この空欄を補完して線を繋げたい場合は、

カスタマイズ > グラフの種類 の [null値を表示]をチェックします。

[null値を表示]をチェックすると数値が入力されてない枠を補完してくれます。

null値をチェック


補完されてグラフの線が繋がりました。

線が繋がりました

グラフの 最小値 最大値 を変更

グラフの下、50以下が数値のとして無駄なので、表示範囲を変更します。

カスタマイズ > 縦軸 を選びます。

最小値に50と入力しました。

最小値


一番下の値が50に変更されました。

最小値50に変更

グラフのグリッド表示を変更

カスタマイズ > グリッド線 

横軸を選んで、
 
主グリッドラインの数を 自動から 7 に
準グリッドラインの数を 6 に変更しました。

グリッド表示を変更 横

日付が増えてグリッドの数も日の数と同じになりました。

横軸変更グラフ

今度は縦軸を選びます

血圧の数値なので高血圧の目安 130 は表示したい。

主グリッドラインの数を自動から 6 に
準グリッドラインの数を 1 に変更しました。 

グリッド変更 縦

縦のグリッドも増えました。130の数値が表示されました。

縦変更グラフ

スポンサーリンク

折れ線グラフのラインの表示変更

ラインの色を変更

脈拍は血圧値よりも目立たない色に変えたいので。

カスタマイズ > 系列

「午前の脈拍」を選択して 色を地味な色に変更しました。
「午後の脈拍」も同じように変更しました。

脈拍系列変更

脈拍の下の2本の線の色が変わりました。

脈拍色変更グラフ

ラインのポイントを変更

数値を測った場所が、わかりやすいようにポイントを表示します。

ポイントの形を 
午前は ●
午後は ▲

にします。

カスタマイズ > 系列

「午前の最高値」を選んで、ポイントのサイズを 4px ポイントの形を ●Circle にしました。

ポイントのサイズはドロップダウンで数値を選べますが、直接数値を入力できます。

ポイント変更

他のラインも同じ手順で変更しました。

ポイント変更グラフ

後は グラフのタイトルなどを変更すれば完成です。

スプレッドシートのグラフをブログに掲載する方法

googleスプレッドシートのグラフはブログなどのHPに乗せることが出来ます。手順を紹介します。

グラフの右上のメニューから[グラフを公開]を選びます。

グラフを公開選択

「埋め込む」を選択するとHTMLのコードが表示されます。

これをコピーして自分のブログやHPのHTMLに貼り付けることができます。

グラフコード

「インタラクティブ」を「画像」変更しました。
ブログやHPに表示されるグラフは、画像になります。

画像選択

「変更が加えられたときに自動的に再公開する」にチェックを入れると元のスプレッドシートの数値を変えると、ブログに載せた画像のグラフも変わります。

自動変更


下のグラフは生成されたドキュメントをこのブログのHTMLに実際に貼り付けたグラフです。

生成されたHTMLのコードを貼り付けるだけでブログにスプレッドシートのグラフを埋め込む事ができました。

グラフをドラッグ・アンド・ドロップしてみると画像になってるのが、
わかると思います。

ブログに埋め込んだグラフ

元のスプレッドシートを変更すると、このブログに埋め込んでいるグラフも変わってしまうのでブログに載せるスプレッドシートのファイルは別に用意して普段使っているファイルとは分けたほうが良いでしょう。


※Googleスプレッドシートは自動保存で便利ですが、意図しないタイミングで保存されてしまうことも。


まとめ

グラフ作成からブログに埋め込むところまで紹介しました。簡単に操作できて、機能も過不足なく使い勝手も良いと思います。

googleスプレッドシートは、googleのオフィススイート、Gススイートの中の表計算ソフトです。
マイクロソフトのExcelのように使えますが、これがすべて無料で使えるのはすごいです。

googleドライブ内でのサービスでなので、googleの他のサービスとの連携も取れるので非常に便利。

ぜひ使ってみてはどうでしょうか?








𝕏 ( 旧Twitter ) Facebook Pocket LINE はてブ

おすすめの関連記事



あわせてよく読まれている記事