2020年4月22日 / 最終更新日時 : 2022年7月12日 officeの杜 Google

Google Apps ScriptとChart.jsでレーダーチャートを作る【GAS】

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

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

1 今回使用するスプレッドシート等
2 実行結果
3 ソースコード
- 3.1 GAS側コード
- 3.2 HTML側コード
4 関連リンク

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

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

今回のライブラリは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("セットアップ完了");
}

//メニューを表示

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>

<html>

<head>

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>

<h3>青魔道士のパラメータ</h3>

</canvas>

</div>

</body>

</html>

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