GoogleスプレッドシートでグラフをWEBに公開する方法

Googleスプレッドシートで作成したグラフは、画像としてダウンロードしなくても、そのままブログやサイトに掲載できるということに最近気が付きました。

Googleスプレッドシートのグラフ公開手順

手順はとても簡単です。

1. 作成したグラフをクリック
2. グラフ右上に表示される「︙」（縦三点リーダー）をクリック
3. グラフを公開 を選択

「グラフの公開」を選択すると「ウェブに公開」というページに遷移しますので「公開」をクリックします。

埋め込むタブを選択するとhtmlコード（iframe）が表示されます。

グラフは、インタラクティブか画像を選択ができます。インタラクティブを選ぶとグラフにマウスポインタを合わせるとポイントしたグラフの値が表示されます。

下記はバーチャートの表示例です。

Googleスプレッドシートのグラフを直接参照しているので、スプレッドシートでグラフが参照しているデータやグラフを変更すると公開しているグラフも連動して変更されます。またスプレッドシートを削除してしまうと表示されなくなってしまいます。

スマホの表示が崩れる

取得した埋め込みコードのままだと、グラフのサイズによってはスマホの表示が崩れてしまいます。

スタイルシートで調整しようとしましたが挫折しました。コード上のwidth（横幅） と height（高さ）を適宜調整してください。

無知は罪なりでした、、、、。