【GAS GoogleAppsScript | グラフの作成2】色々なグラフを作成する!

スポンサーリンク

色々なグラフを作成する!

前回、スプレッドシートのデータからGASでグラフを作成する基本的な部分を紹介させて頂きました。

今回は、その続きということで、紹介したエリアチャート(面グラフ)以外のグラフの作成について紹介したいと思います!

EmbeddedChartBuilderクラス

前回、下のコードでエリアチャート(面グラフ)を作りました。

function test(){

  // ①シートを取得
  var sheet = SpreadsheetApp.getActiveSheet()
  // ②範囲を取得
  var range = sheet.getRange(2, 1, 7, 2)
 
  
  // グラフを作成
  var chart = sheet.newChart() // ③
                .addRange(range) // ④
                .setPosition(1, 4, 0, 0) // ⑤
                .build() // ⑥
  
  // ⑦シートにグラフを表示
  sheet.insertChart(chart)
  
}
  1. sheet.newChart()でEmbeddedChartBuilderインスタンスを作成する
  2. EmbeddedChartBuilderのメソッドで各種設定を行う
  3. build()で各種設定をグラフに反映する
  4. sheet.insertChart(chart)でシートにグラフを挿入する

この流れだったと思います。

他のグラフを作成するには、「2.EmbeddedChartBuilderのメソッドで各種設定を行う」のところで、用意されているメソッドで設定します。

用意されているメソッドは次になります。

EmbeddedChartBuilderのメソッド一覧

戻り値の型説明
addRange(range)EmbeddedChartBuilder グラフの元となるデータの範囲を設定する
asAreaChart()EmbeddedAreaChartBuilder グラフの種類をエリアチャート(面グラフ)に設定しする
asBarChart()EmbeddedBarChartBuilder  グラフの種類を棒グラフ(横)に設定する
asColumnChart()EmbeddedColumnChartBuilder  グラフの種類を棒グラフ(縦)に設定する
asComboChart()EmbeddedComboChartBuilder  グラフの種類をコンボチャートに設定する(折れ線と棒)
asHistogramChart()EmbeddedHistogramChartBuilder  グラフの種類をヒストグラムに設定する
asLineChart()EmbeddedLineChartBuilder  グラフの種類を折れ線グラフに設定する
asPieChart()EmbeddedPieChartBuilder  グラフの種類を円グラフに設定する
asScatterChart()EmbeddedScatterChartBuilder  グラフの種類を散布図に設定する
asTableChart()EmbeddedTableChartBuilder  グラフの種類をテーブルチャートに設定する
build()EmbeddedChart  チャートに加えられたすべての変更を反映するようにチャートを作成する
clearRanges()EmbeddedChartBuilder  設定されたデータ範囲を全て削除する
getChartType()ChartType  現在のチャートタイプを返す
getContainer()ContainerInfo   ContainerInfoチャートがシートのどこに表示されるかをカプセル化したチャートを返す
getRanges()Range[]  グラフに設定されているデータの範囲のコピーを返す
removeRange( range )EmbeddedChartBuilder  設定されたデータ範囲の中で指定したものを削除する
setChartType( type )EmbeddedChartBuilder  グラフのタイプを変更する
setHiddenDimensionStrategy( strategy ) EmbeddedChartBuilder  非表示の行と列の扱いの設定する
setMergeStrategy( mergeStrategy )EmbeddedChartBuilder   複数の範囲が存在する場合に使用するマージの方法を設定する
setNumHeaders( headers )EmbeddedChartBuilder  ヘッダーとして扱われる範囲の行または列の数を設定する
setOption( option, value )EmbeddedChartBuilder  グラフの詳細オプションを設定する
setPosition( anchorRowPos, anchorColPos, offsetX, offsetY )EmbeddedChartBuilder  位置を設定し、グラフがシートのどこに表示されるかを変更します。

setTransposeRowsAndColumns( transpose )

EmbeddedChartBuilder  グラフの行と列を入れ替えるかどうかを設定する

棒グラフを作成する

それでは棒グラフを作成してみます。

次のサンプルを使いましょう。

基本的な流れは、前回やった折れ線グラフの流れと同じですが、「グラフを作成」の部分で、「.asColumnChart()」を追加で設定しています。

function test(){

  // シートを取得
  var sheet = SpreadsheetApp.getActiveSheet()
  // 範囲を取得
  var range = sheet.getRange(2, 1, 7, 2)
 
  
  // グラフを作成
  var chart = sheet.newChart()
                .addRange(range)
                .asColumnChart() // ここで棒グラフに設定している
                .setPosition(1, 4, 0, 0)
                .build()
  
  // シートにグラフを表示
  sheet.insertChart(chart)
  
}

実行すると、次のようなおなじみの棒グラフ(縦)が出来上がります。

ちなみに、「.asColumnChart()」を「.asBarChart()」に変えたら、棒グラフが横向きになります。

つまり、このグラフの種類の設定をしないと、デフォルトではエリアチャートになるんですね。

他にも一覧にあるように、次のようなグラフの種類が設定出来ます。

メソッドグラフの種類戻り値の型
asAreaChart()エリアチャート(面グラフ)EmbeddedAreaChartBuilder 
asBarChart()棒グラフ(横)EmbeddedBarChartBuilder
asColumnChart()棒グラフ(縦)EmbeddedColumnChartBuilder  
asComboChart()コンボチャート(折れ線と棒)EmbeddedComboChartBuilder 
asHistogramChart()ヒストグラムEmbeddedHistogramChartBuilder 
asLineChart()折れ線グラフEmbeddedLineChartBuilder  
asPieChart()円グラフEmbeddedPieChartBuilder  
asScatterChart()散布図EmbeddedScatterChartBuilder  
asTableChart()テーブルチャートEmbeddedTableChartBuilder  

それぞれ戻り値は、グラフの種類ごとのオブジェクトになります。

グラフの詳細設定する

更にグラフの詳細を設定することが出来ます。

グラフの種類を設定した際に、それぞれのグラフに応じたオブジェクトが返ります。詳細設定もグラフによって出来る内容が変わって来ますので注意してください。

ですが、全部やると大変なので、ここでは棒グラフ(縦)のグラフタイトルを設定する方法を紹介します。

もっと詳しく知りたい!という方は公式リファレンスも参考にしてください(^o^)

グラフタイトルを設定するには、「setOptionメソッド」を使います。

setOption( option, value )

引数の「option」には、詳細設定の項目を、「value」には項目に設定する値を指定します。

下のコードは、これまでのグラフのグラフタイトルを”曜日別の売上”に設定してする項目を追加しています。

.setOption( ‘title’, ‘曜日別の売上’ )

function test(){

  // シートを取得
  var sheet = SpreadsheetApp.getActiveSheet()
  // 範囲を取得
  var range = sheet.getRange(2, 1, 7, 2)
 
  
  // グラフを作成
  var chart = sheet.newChart()
                .addRange(range)
                .asColumnChart() // ここで棒グラフに設定している
                .setPosition(1, 4, 0, 0)
                .setOption('title', '曜日別の売上') // ここでオプション設定
                .build()
  
  // シートにグラフを表示
  sheet.insertChart(chart)
  
}

実行すると、次のようにグラフタイトルが設定されます。

他にもアニメーションの設定など様々なオプションが設定出来ます。

棒グラフ(縦)の色を変更する

グラフの色など体裁を設定するには、各グラフのオブジェクトのメソッドを使います。

メソッドグラフの種類戻り値の型(オブジェクトの型)
asAreaChart()エリアチャートEmbeddedAreaChartBuilder 
asBarChart()棒グラフ(横)EmbeddedBarChartBuilder
asColumnChart()棒グラフ(縦)EmbeddedColumnChartBuilder  
asComboChart()コンボチャート(折れ線と棒)EmbeddedComboChartBuilder 
asHistogramChart()ヒストグラムEmbeddedHistogramChartBuilder 
asLineChart()折れ線グラフEmbeddedLineChartBuilder  
asPieChart()円グラフEmbeddedPieChartBuilder  
asScatterChart()散布図EmbeddedScatterChartBuilder  
asTableChart()テーブルチャートEmbeddedTableChartBuilder  

ここでは、棒グラフ(縦)の棒の色を変更する方法を紹介します。

棒グラフ(縦)なので、EmbeddedColumnChartBuilderクラスsetColorsメソッドを利用します。

EmbeddedColumnChartBuilderオブジェクト.setColors(cssValues)

引数の「cssValues」のに色を設定しますが、CSSでも使う色の指定で大体行けそうです(^o^)

色を付ける以外にも色々なメソッドが用意されています。

EmbeddedColumnChartBuilderクラスのメソッド一覧

メソッド戻り値の型説明
addRange(range)EmbeddedChartBuilderこのビルダーの修正は、チャートの範囲を追加します。
asAreaChart()EmbeddedAreaChartBuilderAreaChart戻りEmbeddedAreaChartBuilderにグラフの種類を設定します。
asBarChart()EmbeddedBarChartBuilder
BarChartコントロールとリターンEmbeddedBarChartBuilderにグラフの種類を設定します。
asColumnChart()EmbeddedColumnChartBuilder
グラフの種類は、ColumnChartの戻りEmbeddedColumnChartBuilderに設定します。
asComboChart()EmbeddedComboChartBuilderComboChart戻りEmbeddedComboChartBuilderにグラフの種類を設定します。
asHistogramChart()EmbeddedHistogramChartBuilderHistogramChartとリターンにグラフの種類を設定します。
EmbeddedHistogramChartBuilder。
asLineChart()EmbeddedLineChartBuilder
折れ線グラフとリターンEmbeddedLineChartBuilderにグラフの種類を設定します。
asPieChart()EmbeddedPieChartBuilder円グラフとリターンEmbeddedPieChartBuilderにグラフの種類を設定します。
asScatterChart()EmbeddedScatterChartBuilderScatterChartとリターンにグラフの種類を設定します。
EmbeddedScatterChartBuilder。
asTableChart()EmbeddedTableChartBuilderTableChart戻りEmbeddedTableChartBuilderにグラフの種類を設定します。
build()EmbeddedChartそれに対して行われたすべての変更を反映するために、グラフを作成します。
clearRanges()EmbeddedChartBuilderチャートからのすべての範囲このビルダー修正を削除します。
getChartType()ChartType現在のチャートタイプを返します。
getContainer()ContainerInfoチャートが表示されカプセル化ContainerInfo、チャートを返します。
シート上。
getRanges()Range[]範囲は現在、このためにデータを提供するのリストのコピーを返します。
チャート。
removeRange(range)EmbeddedChartBuilderこのビルダーの修正は、チャートから指定された範囲を削除します。
reverseCategories()EmbeddedColumnChartBuilderドメインの軸で、一連の描画を反転します。
setBackgroundColor(cssValue)EmbeddedColumnChartBuilderチャートの背景色を設定します。
setChartType(type)EmbeddedChartBuilderグラフの種類を変更します。
setColors(cssValues)EmbeddedColumnChartBuilderグラフ内の線の色を設定します。
setHiddenDimensionStrategy(strategy)EmbeddedChartBuilder非表示の行と列のために使用するための戦略を設定します。
setLegendPosition(position)EmbeddedColumnChartBuilderチャートに対する凡例の位置を設定します。
setLegendTextStyle(textStyle)EmbeddedColumnChartBuilderグラフの凡例のテキストスタイルを設定します。
setMergeStrategy(mergeStrategy)EmbeddedChartBuilder複数の範囲が存在するときに使用するセットのマージ戦略。
setNumHeaders(headers)EmbeddedChartBuilder扱われるべき範囲の行または列の数を設定します
ヘッダ。
setOption(option, value)EmbeddedChartBuilderセットはこのチャートのオプションを進めました。
setPosition(anchorRowPos, anchorColPos, offsetX, offsetY)EmbeddedChartBuilderチャートはシートの上に表示される場所変更、位置を設定します。
setRange(start, end)EmbeddedColumnChartBuilderチャートの範囲を設定します。
setStacked()EmbeddedColumnChartBuilder用途は、ライン、バーの値が積層されていることを意味し、ラインを積み重ね
(累積)。
setTitle(chartTitle)EmbeddedColumnChartBuilderグラフのタイトルを設定します。
setTitleTextStyle(textStyle)EmbeddedColumnChartBuilderグラフタイトルのテキストスタイルを設定します。
setTransposeRowsAndColumns(transpose)EmbeddedChartBuilderグラフの行と列が入れ替わっているかどうかを設定します。
setXAxisTextStyle(textStyle)EmbeddedColumnChartBuilder横軸のテキストスタイルを設定します。
setXAxisTitle(title)EmbeddedColumnChartBuilder横軸にタイトルを追加します。
setXAxisTitleTextStyle(textStyle)EmbeddedColumnChartBuilder横軸のタイトルのテキストスタイルを設定します。
setYAxisTextStyle(textStyle)EmbeddedColumnChartBuilder縦軸のテキストスタイルを設定します。
setYAxisTitle(title)EmbeddedColumnChartBuilder縦軸にタイトルを追加します。
setYAxisTitleTextStyle(textStyle)EmbeddedColumnChartBuilder縦軸のタイトルのテキストスタイルを設定します。
useLogScale()EmbeddedColumnChartBuilder(対数スケールにレンジ軸を作ることであるとすべての値を必要とします
正)。

他の種類のオブジェクトのメソッドについては公式リファレンスをご覧ください。

本筋に戻ります。

単純に色を変更するだけなら、次のようになります。

function test(){

  // シートを取得
  var sheet = SpreadsheetApp.getActiveSheet()
  // 範囲を取得
  var range = sheet.getRange(2, 1, 7, 2)
 
  
  // グラフを作成
  var chart = sheet.newChart()
                .addRange(range)
                .asColumnChart() // ここで棒グラフに設定している
                .setPosition(1, 4, 0, 0)
                .setOption('title', '曜日別の売上') // ここでオプション設定
                .setColors(["darkgreen"]) // ここで棒の色を設定
                .build()
  
  // シートにグラフを表示
  sheet.insertChart(chart)
  
}

「.setColors([“darkgreen”,]) // ここで棒の色を設定」の部分でダークグリーンに設定しています。※配列で指定してることに注意してください。

項目が複数ある場合は、配列の中身を増やします。

例えばサンプルの項目が2つあったとします。

その場合は、[“darkgreen”]の中身を、増やします。

[“darkgreen”,”darkgray”]にしましょう。項目の順番と色の順番が対応します。

function test(){

  // シートを取得
  var sheet = SpreadsheetApp.getActiveSheet()
  // 範囲を取得
  var range = sheet.getRange(2, 1, 7, 2)
 
  
  // グラフを作成
  var chart = sheet.newChart()
                .addRange(range)
                .asColumnChart() // ここで棒グラフに設定している
                .setPosition(1, 4, 0, 0)
                .setOption('title', '曜日別の売上') // ここでオプション設定
                .setColors(["darkgreen", "darkgray"]) // ここで棒の色を設定
                .build()
  
  // シートにグラフを表示
  sheet.insertChart(chart)
  
}

こんな具合に出来ます。

まとめ

GASで色々なグラフを作成する基本を紹介しました!公式リファレンスを読み込んで色々な設定をしてみましょう!今後、グラフについてももっと詳細な解説もやっていきたいと思います!

コメント