サイト名

5ステップで簡単！GASを使ったグラフ作成方法

GASでグラフを作成するってどうやるんだろう？上手く使いこなしてみたいんだけど…
猫男
猫男
catman
catman
よし、catmanが「GASを使ったグラフ作成」について手取り足取り教えてやろう！一緒に5ステップで進めてみようか。

 

GASを使ったグラフ作成法

次の5ステップを踏んでみよう。

 

ステップ1：Google Sheetsを準備しよう

グラフを作成するためにはまずデータが必要だ。Google Sheetsでデータを用意しておこう。


// 例：Google Sheetsに以下のようなデータを用意する
// 日付, 売上
// 2023-01-01, 100
// 2023-01-02, 200
// ...
  • これがグラフのデータとして必要になる。それじゃあ次のステップに進もう。

ステップ2：GASを起動してスクリプト作成

次に、Google Apps Scriptでスクリプトを作成するぞ。


function createGraph() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A1:B10"); // データ領域を指定
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(range)
    .setPosition(5, 1, 0, 0)
    .build();
  sheet.insertChart(chart);
}
  • getActiveSpreadsheet()でアクティブなスプレッドシートを取得
  • newChart()で新しいグラフを作成し、setChartType()でグラフの種類を指定
  • addRange()でデータ範囲を設定
  • setPosition()でグラフを挿入する位置を決定
なるほど、範囲や位置を決めていくんですね！
猫男
猫男

ステップ3：スクリプトを実行する

スクリプトを実行して、実際にグラフが生成されるか確認してみよう。

createGraph();
    • スクリプトを実行すると、指定した場所にグラフが生成されるはずだ。

ステップ4：グラフのカスタマイズ

グラフをもっと見やすくカスタマイズすることも可能さ。


function createCustomizedGraph() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A1:B10");
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.LINE)
    .addRange(range)
    .setOption('title', '売上グラフ')
    .setOption('legend', {position: 'bottom'})
    .setPosition(5, 1, 0, 0)
    .build();
  sheet.insertChart(chart);
}
  • setOption()でタイトルや凡例などを設定して見た目を調整
ああ！これなら視覚的にわかりやすくなりますね！
猫男
猫男

ステップ5：他の種類のグラフも試してみよう

慣れてきたら、他のグラフタイプも試してみるといいぞ。


function createPieChart() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A1:B10");
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.PIE)
    .addRange(range)
    .setOption('title', '売上比率')
    .setPosition(5, 1, 0, 0)
    .build();
  sheet.insertChart(chart);
}
  • ChartType.PIEで円グラフを描画できるんだ。
いろんなタイプのグラフに挑戦できそう！ありがとう、catman！
猫男
猫男

 

練習問題

Google Apps Scriptで、以下のデータを元に棒グラフを生成するスクリプトを書いてみよう。

| 日付 | 訪問者数 |
|——–|———-|
| 2023-02-01 | 150 |
| 2023-02-02 | 230 |
| 2023-02-03 | 300 |

解答と解説

以下がスクリプトの解答例だ。


function createVisitorGraph() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A1:B4");
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(range)
    .setOption('title', '訪問者数の統計')
    .setPosition(5, 2, 0, 0)
    .build();
  sheet.insertChart(chart);
}
  • getRange(“A1:B4”) でデータ範囲を指定している。この範囲内のデータがグラフに反映される。
  • setChartType(Charts.ChartType.COLUMN) で棒グラフを選択。COLUMNは棒グラフを示す。
  • setOption でタイトルやその他のオプションを設定し、グラフをより見やすくしている。
  • build() でグラフオブジェクトを完成させ、それをinsertChart() でシートに挿入。

関連記事