少し前のGoogleスプレッドシートは、レーダーチャートが装備されていませんでした。現在はレーダーチャートが装備されており、また、Visualization APIでもレーダーチャートを作成出来るようになっています。

一つの要素に対する複数のパラメータを可視化するのに向いているこのレーダーチャートですが、今回はChart.jsと呼ばれるライブラリを使ってスプレッドシートのデータを元にレーダーチャートを生成してみようと思います。

難易度:

今回使用するスプレッドシート等

スプレッドシートを開き、上部にある「チャート表示」メニューの中の【レーダーチャート】を開くとスプレッドシート上のデータをレーダーチャートで表示します。今回は、1つ目のレコードの青魔道士のパラメータだけをチャートにしていみています。

今回のライブラリはCanvasを使ってチャートを描くので非常に綺麗で動きのあるものになります。

実行結果

ソースコード

GAS側コード

  • 使用前にメニューからチャート表示⇒セットアップを実行して、スクリプトプロパティにシートのIDを格納しましょう。
  • 今回はレーダーチャートを実行すると、スプレッドシート上でもチャートを表示するようにしています。
  • ※ダウンロードしたchart.jsファイルをウェブストレージなどに配置して読み込ませています。

HTML側コード

  • レーダーチャートでは、1列目の項目名は使用しないので、dataの指定時の配列には含めいないように注意すること。
  • labelsやdataの指定は、配列で行うので、予めこれら2つ用の配列を用意して置くこと。
  • カラーリングの指定と、描画時のオプション指定は別なので、混同しないようにすること。
  • グラフの大きさは、canvasタグ内で指定するが、HTML Service出力時の枠をはみ出ないように調整しましょう。
  • ひとつのレーダーチャートに複数のチャートを表示する時は、dataset内に{}で括った項目をカンマ区切りでもう一個いれてあげれば出来ます。詳しい作成方法はこちらのサイトへどうぞ。
  • 複数のレーダーチャートを1ページに表示する場合には、canvasのidを変えたものを複数用意して、それぞれに対して別々にデータの準備と描画を行えば可能です。

関連リンク

共有してみる: