GASでグラフ画像を生成する

この記事はand factory.inc Advent Calendar 2024 15日目の記事です。

はじめに

スプレッドシート上のグラフ画像をXに投稿するGASを組みたかったのですが、Sheets APIを確認したところ、以下コードを見つけたので早速実行してみました。

const blob = this.sheet.getCharts()[0].getBlob().getAs('image/png');

サクッとグラフ画像は作れたんですが、出来上がったグラフ画像が完全ではなかったのです…(私がやったときは軸の書式設定がうまく反映されませんでした)

バグかもしれないので現在は修正済みの可能性がありますが、その時はバグが修正されるのを待てなかったため、別の手段で解決しました。その内容を解説しようと思います。

グラフの作成

GASにはChartsAPIが用意されており、APIを使用してグラフを作成することができます。今回はこのAPIを使用して新規にグラフを作成し、その画像を取得することによって解決しました。
なお、作成したグラフをスプレッドシート追加することもができますが、今回は追加する必要がないのでグラフの作成＆画像生成のみを実施しています。

function main() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  const values = sheet.getRange('A1:C8').getValues();
  const imageBlob = getGraph_(values);

  // TODO: 画像を使用してXに投稿
}

function getGraph_(values) {
  const [header, ...rows] = values;
  header.shift();

  // 列の定義
  const dataTable = Charts.newDataTable();
  dataTable.addColumn(Charts.ColumnType.DATE, '日付');
  header.forEach(x => dataTable.addColumn(Charts.ColumnType.NUMBER, x));

  // 行を追加
  rows.forEach(row => {
    dataTable.addRow(row)
  });
  
  // チャートを作成
  const chart = Charts.newLineChart() // 折れ線グラフを作成
      .setDataTable(dataTable.build()) // データ
      .setDimensions(700, 500) // サイズ
      .setOption('legend.position', 'top') // 凡例の位置
      .setOption('legend.maxLines', 2) // 凡例の行数
      .setOption('hAxis.format', 'yyyy/MM/dd') // 横軸のフォーマット
      .setOption('chartArea', {top: 60, left: 70, width: '85%', height: '80%'}) // グラフの描画領域(軸と凡例を除く)
      .setColors(['#000000', '#c7b83c']) // 軸の色
      .build();

  return chart.getAs('image/png');
}

setOptionを使用してグラフの詳細を指定しています。なお、setOptionに指定することができるオプションはこちらに記載されています。

使用したデータ

実際にできた画像がこちら

うまく折れ線グラフが作成されていますね。

おわりに

最初に問題となっていた軸の書式設定がちゃんと反映されていたのでこれで解決です。

GASでグラフが作れると、定期的にデータをグラフ化してSlackに投稿したりなど、業務で使用することも可能かと思いますので興味を持った方はぜひお試しください。