ブログでグラフを使いたいときどうしていますか?
javascriptやcssでもできますし、グラフ用のWebサービスもいろいろとありますよね。
今回はその選択肢の一つとして、Googleスプレッドシートを紹介したいと思います。
まずはスプレッドシートでグラフを作る

作りたいグラフの元となるデータを打ち込む
まずはデータがないとグラフ作れません。
必要な数値を入力していきましょう。
英語 | 国語 | 数学 | 社会 | |
A | 20 | 30 | 10 | 10 |
B | 80 | 90 | 80 | 100 |
C | 50 | 70 | 70 | 20 |
D | 50 | 40 | 20 | 100 |
グラフにしたいデータを選択
ShiftやCtrlを使って、グラフにしたいデータを選択しましょう!
メニューバーの「挿入」タブからグラフを選ぶ
次はメニューバーの[挿入]> グラフ を選択します。(上の方に並んでますよね)
右側にグラフエディタが表示されるので、イメージに近いグラフを選択していきましょう。
未入力がある場合には「null値を表示」チェック
折れ線グラフなどの場合、空欄があると線がつながりません。
そういったときは、カスタマイズ(グラフエディタの設定の隣) > グラフの種類のnull値を表示をチェックします。
線がつながります。
グラフをブログに載せる
諸々カスタマイズが完了したら、ブログに載せましょう!
出来上がったグラフ本体の右上、⁝←こんなやつをクリック。
表示された項目から『グラフの公開』を選択します。
リンク→画像と進み
表示されたURLをコピーして好きなところに貼り付けたら完成です。(ワードプレスなら画像扱いでOK!)
↓のような感じになります。
ampエラー【属性「seamless」はタグ「amp-iframe」で使用できません。】が出たら
属性「seamless」はタグ「amp-iframe」で使用できません。
seamlessを消しましょう。
それでけでOKです。
HTML上で消すだけでいいです。
seamless=””となっていれば全部消してもいけます。
グラフがスマホだとずれる
埋め込みでやるとそうなりますよね><
諦めてリンクでやりましょう。

ごり丸
簡単にできて便利だよね
コメント