Google Apps ScriptとChart.jsでレーダーチャートを作る【GAS】
少し前のGoogleスプレッドシートは、レーダーチャートが装備されていませんでした。現在はレーダーチャートが装備されており、また、Visualization APIでもレーダーチャートを作成出来るようになっています。
一つの要素に対する複数のパラメータを可視化するのに向いているこのレーダーチャートですが、今回はChart.jsと呼ばれるライブラリを使ってスプレッドシートのデータを元にレーダーチャートを生成してみようと思います。
リンク
今回使用するスプレッドシート等
スプレッドシートを開き、上部にある「チャート表示」メニューの中の【レーダーチャート】を開くとスプレッドシート上のデータをレーダーチャートで表示します。今回は、1つ目のレコードの青魔道士のパラメータだけをチャートにしていみています。
今回のライブラリはCanvasを使ってチャートを描くので非常に綺麗で動きのあるものになります。
実行結果
ソースコード
GAS側コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
//メニューを表示 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側コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<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の指定は、配列で行うので、予めこれら2つ用の配列を用意して置くこと。
- カラーリングの指定と、描画時のオプション指定は別なので、混同しないようにすること。
- グラフの大きさは、canvasタグ内で指定するが、HTML Service出力時の枠をはみ出ないように調整しましょう。
- ひとつのレーダーチャートに複数のチャートを表示する時は、dataset内に{}で括った項目をカンマ区切りでもう一個いれてあげれば出来ます。詳しい作成方法はこちらのサイトへどうぞ。
- 複数のレーダーチャートを1ページに表示する場合には、canvasのidを変えたものを複数用意して、それぞれに対して別々にデータの準備と描画を行えば可能です。