Google Apps ScriptとChart.jsでレーダーチャートを作る【GAS】
少し前のGoogleスプレッドシートは、レーダーチャートが装備されていませんでした。現在はレーダーチャートが装備されており、また、Visualization APIでもレーダーチャートを作成出来るようになっています。
一つの要素に対する複数のパラメータを可視化するのに向いているこのレーダーチャートですが、今回はChart.jsと呼ばれるライブラリを使ってスプレッドシートのデータを元にレーダーチャートを生成してみようと思います。
リンク
今回使用するスプレッドシート等
スプレッドシートを開き、上部にある「チャート表示」メニューの中の【レーダーチャート】を開くとスプレッドシート上のデータをレーダーチャートで表示します。今回は、１つ目のレコードの青魔道士のパラメータだけをチャートにしていみています。
今回のライブラリはCanvasを使ってチャートを描くので非常に綺麗で動きのあるものになります。
実行結果
ソースコード
GAS側コード
//メニューを表示
function onOpen(){
var ui = SpreadsheetApp.getUi();
ui.createMenu('▶チャート表示')
.addItem('セットアップ', 'setup')
.addItem('レーダーチャート', 'chartman')
.addToUi();
}
//ウェブアプリケーションでグラフを表示
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('radar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('レーダーチャート')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return html;
}
//チャートを表示する
function chartman() {
var html = HtmlService.createHtmlOutputFromFile('radar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(750)
.setHeight(520);
SpreadsheetApp.getUi()
.showModalDialog(html, 'レーダーチャートの作成');
}
//スプレッドシートデータを返す
function datamanrev(){
var Prop = PropertiesService.getScriptProperties();
var ssid = Prop.getProperty("sheetid")
var sheet = SpreadsheetApp.openById(ssid);
var ss = sheet.getSheetByName("radar");
var dataman = ss.getRange("A1:F").getValues();
return JSON.stringify(dataman);
}
//セットアップ
function setup(){
var sheet = SpreadsheetApp.getActiveSpreadsheet();
var sheetId = sheet.getId();
var Prop = PropertiesService.getScriptProperties();
Prop.setProperty("sheetid",sheetId);
SpreadsheetApp.getUi().alert("セットアップ完了");
}
- 使用前にメニューからチャート表示⇒セットアップを実行して、スクリプトプロパティにシートのIDを格納しましょう。
- 今回はレーダーチャートを実行すると、スプレッドシート上でもチャートを表示するようにしています。
- ※ダウンロードしたchart.jsファイルをウェブストレージなどに配置して読み込ませています。
HTML側コード
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://officeforest.org/wp/library/Chart.js-master/Chart.js"></script>
<script type="text/javascript">
google.script.run.withSuccessHandler(onSuccess).datamanrev();
function onSuccess(data){
var tempdata = JSON.parse(data);
//タイトル列の値を配列に格納
var title = [tempdata[0][1],tempdata[0][2],tempdata[0][3],tempdata[0][4],tempdata[0][5]];
//ターゲットの値を配列に格納
var dataman = [tempdata[1][1],tempdata[1][2],tempdata[1][3],tempdata[1][4],tempdata[1][5]];
//チャートのオプションを指定
var chartman = {
labels: title, //反映するラベルを指定
datasets: [
{
label: "ジョブ別能力グラフ",
fillColor: "rgba(244,250,130,0.7)", // チャート内の色
strokeColor: "#111111", // チャートを囲む線の色
pointColor: "red",
pointStrokeColor: "red",
pointHighlightFill: "red",
pointHighlightStroke: "red",
data: dataman //反映するデータを指定
}
]
};
//指定のエレメントにcanvasで生成する
var ctx = document.getElementById("canvas").getContext("2d");
//canvasのオプション
var options = {
pointLabelFontSize : 10, // ラベルのフォントサイズ
scaleShowLabels: true, // 目盛を表示（true/false）
scaleSteps : 10, // 目盛の数
};
//チャートを表示する
var radarChart = new Chart(ctx).Radar(chartman, options);
}
</script>
</head>
<body>
<div id="kinoko">
<h3>青魔道士のパラメータ</h3>
<canvas id="canvas" width="650px" height="400px">
</canvas>
</div>
</body>
</html>
- レーダーチャートでは、1列目の項目名は使用しないので、dataの指定時の配列には含めいないように注意すること。
- labelsやdataの指定は、配列で行うので、予めこれら２つ用の配列を用意して置くこと。
- カラーリングの指定と、描画時のオプション指定は別なので、混同しないようにすること。
- グラフの大きさは、canvasタグ内で指定するが、HTML Service出力時の枠をはみ出ないように調整しましょう。
- ひとつのレーダーチャートに複数のチャートを表示する時は、dataset内に{}で括った項目をカンマ区切りでもう一個いれてあげれば出来ます。詳しい作成方法はこちらのサイトへどうぞ。
- 複数のレーダーチャートを1ページに表示する場合には、canvasのidを変えたものを複数用意して、それぞれに対して別々にデータの準備と描画を行えば可能です。
