Google Apps ScriptのsetColorsメソッドでグラフの色を設定する方法

みなさん、こんにちは！
タダケン(@tadaken3)です。

さて、今回も、Googleスプレッドシートでの集計・分析作業の効率を上げるための、Google Apps Scriptのテクニックを紹介します。前回は、Google Apps Scripでグラフタイトル・凡例を編集するテクニックをご紹介しました。

【意図を明確に】Google Apps ScriptのsetOptionメソッドでグラフタイトル・凡例を編集する方法

setOptionメソッドを使って、グラフタイトル、凡例を編集するテクニックを紹介します。見た目を整えることで、グラフの意味するところ相手に正確に伝えることができます。

前回に引き続き、グラフの見た目をきれいにするテクニックを紹介します。
今回は、グラフの色を変更する方法をお伝えします。

前回のおさらい
見やすいグラフをつくるには
setColorsメソッドでグラフの色を変更する
まとめ
連載目次：GASでデータ分析！グラフを作成してデータの可視化

前回のおさらい

今回は野菜の産地別販売データを使います。

まず、前回までにご紹介したメソッドを使って、基本となるグラフを作成してみます。
京都産と大阪産で各野菜の販売数を比較したいので、縦棒グラフを作成します。

function createChart() {
  var mySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("sheet1");
  var range = mySheet.getRange("A1:C6");
  var chart = mySheet.newChart()
              .addRange(range)
              .setPosition(1,5,0,0)
              .asColumnChart()　
              .setOption('title', '野菜の産地別販売数')//タイトルを設定
              .setOption('titleTextStyle' ,{color: '#545454', fontSize: 20})//タイトルの書式を設定
              .setOption('legend', {position: 'top', textStyle: {color: '#545454', fontSize: 16}})//凡例の設定
              .build();  
              mySheet.insertChart(chart);
}

タイトルと凡例はカラーコードで、濃いグレー(#545454)にしています。

見やすいグラフをつくるには

データの理解を助けるためには、グラフの配色はとても重要です。

グラフの配色を考える前に、まずすべての要素をグレーにしてしまうことをおすすめします。
色を取り除くことによって、まずそのデータから何が読み取れるのか、何を伝えることができるのか本質的な部分を考えることができます。

その後、強調したい部分、グラフで伝えたい部分にのみ色をつけるという方法が良いかと思います。グラフの色にまでこだわることで、資料のわかりやすさはぐっと上がります。

今回の例では、「京都産」が「大阪産」に比べて好調なので、その点を強調するようにしましょう。

setColorsメソッドでグラフの色を変更する

グラフの色を変更するには、にはsetColorsメソッドを使います。

書き方は

chartオブジェクト.setColors([系列１の色,系列2の色,…]);

です。

系列名の数分だけ、設定したい色を配列にして渡してあげます。
今回の例では京都産を「ダークグリーン」、大阪産を「ダークグレイ」で指定します。
もちろん、カラーコードで指定することもできます。

実際のコードは以下のとおりです。

function createChart() {
  var mySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("sheet1");
  var range = mySheet.getRange("A1:C6");
  var chart = mySheet.newChart()
              .addRange(range)
              .setPosition(1,5,0,0)
              .asColumnChart()　
              .setOption('title', '野菜の産地別販売数')
              .setOption('titleTextStyle' ,{color: '#545454', fontSize: 20})
              .setOption('legend', {position: 'top', textStyle: {color: '#545454', fontSize: 16}})
              .setColors(["darkgreen", "darkgray"])//色を設定
              .build();  
              mySheet.insertChart(chart);
}

これで、グラフの色が変更されました。