ゴルフ松庵

メンバーライフを満喫しシングルプレーヤーを目指す!ブログ

googleのスプレッドシートで使ってスッキリとした折れ線グラフを作る。

      2016/07/28

当ブログの固定ページに「ハンディキャップ」があり毎月変わるハンディキャップを折れ線グラフで表示してます。
このグラフを実現させているのがgoogleスプレッドシートのグラフ機能になります。

いろいろ試行錯誤してレスポンシブに表示させる方法を見つけたのでその方法を記したいと思います。
今回は折れ線グラフを作るところまでを説明します。

スポンサーリンク

googleスプレッドシートでグラフの元ネタ表を作る

googleアカウントを持っていれば誰でも使えるgoogleスプレッドシートを開きます。※googleアカウントが無い場合は作ります→Google アカウントの作成

chromeのアプリページからgoogleドライブを選択します。

googleアプリメニュー

 

以下の画面が表示され、googleドライブに格納されているファイルやディレクトリが表示されます。

googleスプレッドシート_開く

イチからつくる前提で話します、「新規」ボタンを押して「googleスプレッドシート」を選択すると、新規シートが表示されます。

グラフの元ネタとなる表を作ります。

googleスプレッドシート_表作成

↑13ヶ月分のハンディキャップ一覧です。

 

この表をもとにグラフを作ります。

データ部分を選択して、「挿入」→「グラフ」を選択します。

googleスプレッドシート_データ選択

↓の画面が表示されます。

googleスプレッドシート_グラフ挿入1

折れ線グラフを選択して「挿入」ボタンをクリック。

 

googleスプレッドシート_グラフ挿入2

グラフのオブジェクトが出来ます。
表とかぶるので右のほうに移動しておきましょう。

 

ここからグラフの加工です。

色々スッキリ表示させる加工を施します。

googleスプレッドシート_グラフ加工1
グラフオブジェクトをクリックしてアクティブにします、右上の▼をクリックして「高度な編集…」をクリックして、カスタマイズ画面を開いて色々と加工していきます。

 

タイトルと凡例を無くしスッキリとしたグラフに

googleスプレッドシート_グラフ加工2

タイトルをクリア、凡例を「なし」にします。

「フォント」や「背景」でフォント、グラフの背景色も指定できます。

 

縦軸、横軸の加工

googleスプレッドシート_グラフ加工3「軸」で「水平」と「左の縦軸」のそれぞれタイトルをクリアします。

縦軸の値の範囲や、グリッド線の間隔などの加工も行えます。

 

折れ線の加工

googleスプレッドシート_グラフ加工4

「ポイントのサイズ」で、マーカー有り無しを指定します、形は下の「ポイントの形」で指定します。
「データラベル」で「値」を指定すると各マーカーに値が表示されます。

 

グラフの大きさ

スプレッドシート上で表示されているグラフの大きさそのままがブラウザで表示されます。
※imgタグで大きさを指定できるかもしれないけど、PCのブラウザ上で表示する画面サイズをイメージして大きさを決めてください。

外枠の大きさ

グラフオブジェクトをクリックしてアクティブした状態で表示される青枠をドラッグしてサイズを調整します。

枠内でのグラフの大きさ

グラフのど真ん中をダブルクリックして「移動とサイズ変更」を選択すると枠内のグラフのサイズを調整できます。
これもグラフ枠線をドラッグしてサイズ調整します。

googleスプレッドシート_大きさ調整2縦軸と横軸の値がつぶれない範囲で出来る限りギリギリまで大きくします。

 

これで完成です!!

googleスプレッドシート_グラフ完成

 

完成したグラフを、ブログの固定ページにレスポンシブに設定する方法は折れ線グラフをSTINGER6を使ったブログにレスポンシブに表示するに載せてます!

 - WordPress