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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「軸」で「水平」と「左の縦軸」のそれぞれタイトルをクリアします。

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

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

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

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

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

縦軸と横軸の値がつぶれない範囲で出来る限りギリギリまで大きくします。

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