サイト名

【GAS入門】グラフを作成する方法 〜 棒グラフ・円グラフ・折れ線グラフ対応 〜

GASでグラフを作成するってどうやるんだろう？上手く使いこなしてみたいんだけど…
猫男
猫男
catman
catman
オッケー、catmanが「GASを使ったグラフ作成」について教えよう！

 

GASでグラフを作成する方法

よし、ってことで、

  • 棒グラフ
  • 円グラフ
  • 折れ線グラフ

をGASで作成していこう。

 

データを準備

まずはグラフを作る前にデータの準備から。

Google Sheetsで次のようなデータを用意しておこう。

月 売上
1月 100
2月 120
3月 150
4月 130
5月 170

このデータをグラフにしていくぞ。

 

GASで棒グラフ

まずは棒グラフから。


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

このスクリプトを実行すると、こんな感じで棒グラフの登場さ。

gas グラフ作成

 

GASで円グラフ

おっと、円グラフを作りたい？

そんなときはsetChartType()でグラフの種類を円グラフにしよう。

ズバリ、


.setChartType(Charts.ChartType.PIE)

にすればいいな。全体のコードはこうなる。


function createPieGraph() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A2:B6"); // データ領域を指定
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.PIE)
    .addRange(range)
    .setPosition(5, 1, 0, 0)
    .build();
  sheet.insertChart(chart);
}

こいつを実行すると、こんな感じ！

gas グラフ作成

 

GASで折れ線グラフ

おや、折れ線グラフを作りたい？

そんなときはsetChartType()でグラフの種類を折れ線グラフにしよう。

ズバリ、


.setChartType(Charts.ChartType.LINE)

にすればいいな。全体のコードはこうなる。


function createLineGraph() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const range = sheet.getRange("A2:B6"); // データ領域を指定
  const chart = sheet.newChart()
    .setChartType(Charts.ChartType.LINE)
    .addRange(range)
    .setPosition(5, 1, 0, 0)
    .build();
  sheet.insertChart(chart);
}

こいつを実行すると、こんな感じ！

gas グラフ作成

 

GASで挿入できるグラフの種類

おっと、気づいちまったようだな。

そう、ChartTypeを変更すれば多くの種類のグラフをGASで作成できるんだ。

GASで使えるChartTypeを次の表にまとめてみた。要チェックだ。

 

ChartType 説明 用途の例
COLUMN 縦棒グラフ 月別売上、カテゴリーごとの比較
BAR 横棒グラフ 項目数が多い比較、アンケート結果
LINE 折れ線グラフ 時間の推移、トレンドの変化
AREA 面グラフ 累計推移やボリューム感の強調
SCATTER 散布図 相関関係の分析、分布の可視化
PIE 円グラフ 割合の比較、シェア分析
DOUGHNUT ドーナツグラフ 円グラフの派生、割合の比較
HISTOGRAM ヒストグラム データの分布（例：年齢層の分布）
STEPPED_AREA 階段状の面グラフ 区切りごとの累計やステップ変化
COMBO 複合グラフ 棒＋線の組み合わせで比較と推移

 

いろんなタイプのグラフに挑戦できそう！ありがとう、catman！
猫男
猫男

 

GASでグラフを削除する方法

おっと、GASが便利すぎてグラフ作りすぎちまったな。

ありがたいことに、GASでグラフを削除もできる。


function deleteAllCharts() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const charts = sheet.getCharts(); // シートにある全グラフを取得
  charts.forEach(chart => {
    sheet.removeChart(chart); // 1つずつ削除
  });
}

  • sheet.getCharts() → そのシート上のすべてのグラフを配列で取得

  • sheet.removeChart(chart) → 指定したグラフを削除

 

えっ、全てのグラフは削除したくない？

そんな時は、最新のグラフだけ削除しようぜ。


function deleteFirstChart() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const charts = sheet.getCharts();
  if (charts.length > 0) {
    sheet.removeChart(charts[0]);
  }
}

削除するグラフをcharts[0]として要素番号を指定できるんだ。0番目だから最後に作った最新のグラフさ。

 

練習問題

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() でシートに挿入。

 

関連記事