GASでグラフごとの色分けができないので改善策を知りたい

Question

実現したいこと

• できあがるグラフの色をそれぞれわけたい

前提

コードは正しく動く

【データセット】
B1:K1に店舗名
A1:月
A2：A16に月データ
B2:K16に売上数値
B17:K17に総計

発生している問題・エラーメッセージ

コードそのものはただしく機能するが、グラフの色がすべて同じ色になる

該当のソースコード

function chuou_per() {
  area = "中央エリア"

  createLineChartForSpecificNames(area)
}



function createLineChartForSpecificNames(area) {

  let ss = SpreadsheetApp.getActiveSpreadsheet();
  let pivotSheet = ss.getSheetByName(area);
  let lastColumn = pivotSheet.getLastColumn();//最終列を取得
  let lastColumnName = getColumnLetter(lastColumn);

  // ピボットテーブルシートのB1:K1から対象の名前リストを取得
  let nameRange = pivotSheet.getRange("B1:" + lastColumnName + "1");
  let targetNames = nameRange.getValues()[0]; // 1行目のデータを取得

  let chartTop = 23; // グラフの縦方向の配置位置

  for (let i = 0; i < targetNames.length; i++) {
    let targetName = targetNames[i];
    let dataColumn = i + 2; // B列から始まるため、インデックス+2が対応する列番号
    let color = i


    createLineChartFromPivotTable2(targetName, dataColumn, chartTop, area,color);
    chartTop += 18; // グラフ間の縦方向のスペースを調整

  }
}


function createLineChartFromPivotTable2(targetName, dataColumn, chartTop, area,color) {
  // シートを取得
  let ss = SpreadsheetApp.getActiveSpreadsheet();
  let pivotSheet = ss.getSheetByName(area);

  // 使用するデータのセル範囲を取得
  let lastRow = pivotSheet.getLastRow() - 1; // 最終行の一つ前の行番号を取得
  let xRange = pivotSheet.getRange("A1:A" + lastRow);
  let dataRowCount = xRange.getNumRows(); // データ行の数
  let yRange = pivotSheet.getRange(1, dataColumn, dataRowCount, 1); // C列のデータ範囲

  // データ範囲内の最大値を取得
  let lastColumn = pivotSheet.getLastColumn();//最終列を取得
  let lastColumnName = getColumnLetter(lastColumn);
  let range = pivotSheet.getRange("B1:" + lastColumnName + lastRow);//dataすべて
  let dataValues = range.getValues();
  let dataMaxValue = 0;

  // データ範囲内の最大値を探す
  for (let i = 1; i < dataValues.length; i++) {
    for (let j = 0; j < lastColumn; j++) {
      let cellValue = parseFloat(dataValues[i][j]);
      if (!isNaN(cellValue)) {
        dataMaxValue = Math.max(dataMaxValue, cellValue);
      }
    }
  }

  // 最大値を1.1倍して切り上げた値を設定
  let roundedMaxValue = Math.ceil(dataMaxValue / 1000000) * 1000000; // 100万単位で切り上げたラウンド値



  // タイトルのスタイルを設定
  let titleTextStyle = {
    fontSize: 14, // タイトルのフォントサイズ
    bold: true,   // ボールドフォントを使用
    alignment: "center" // 中央揃え
  };

  // 横軸の設定
  let hAxisOptions = {
    slantedText: true,
    slantedTextAngle: 45,
    textStyle: {
      fontSize: 10
    }
  };

  // gridlines オプションの設定
  let gridlinesOptions = {
    count: dataRowCount
  };

  //縦軸の設定
  // vAxisの設定
  let vAxisOptions = {
    maxValue: roundedMaxValue, // ここに最大値を指定
    minValue: 0, // ここに最小値を指定
    format: "¥#,###", // 縦軸の表示フォーマットを指定
    textStyle: {
      fontSize: 10
    }
  };

  //データ系列の色を設定
  let seriesOptions = {
    0: { color: "#8AB3F8" },     // データ系列 0 の色を赤に設定
    1: { color: '#EF7268' },    // データ系列 1 の色を青に設定
    2: { color: '#FCCD43' },   // データ系列 2 の色を緑に設定
    3: { color: '#34A853' },
    4: { color: '#FF6D01' },
    5: { color: '#46BDC6' },
    6: { color: '#7BAAF7' },
    7: { color: '#F07B72' },
    8: { color: '#FCD04F' },
    9: { color: '#71C287' },
    // 必要なだけデータ系列の色を設定してください
  };

  let colors = Object.values(seriesOptions).map(option => option.color);

  // チャートを作成
  let chart = pivotSheet.newChart()
    .setChartType(Charts.ChartType.LINE) // チャートの種類を設定
    .addRange(xRange) // X軸のデータ範囲を追加
    .addRange(yRange) // Y軸のデータ範囲を追加
    .setNumHeaders(1) // ヘッダーとして扱う行・列の数
    .setPosition(chartTop, 13, 0, 0) // グラフの配置位置を設定
    .setOption("title", targetName) // タイトルを設定
    .setOption("titleTextStyle", titleTextStyle) // タイトルのスタイルを設定
    .setOption("hAxis", hAxisOptions)
    .setOption("hAxis.gridlines", gridlinesOptions)
    .setOption("colors", colors[color])
    .setOption("vAxis", vAxisOptions) // vAxisのオプションを設定
    .build(); // チャートを作成

    

  // シートにチャートを挿入
  pivotSheet.insertChart(chart);
}

試したこと

.setOption("colors", colors[color])

colors[color]を直接一つの色を指定すると、その色に正しくなる

Comments

[atlanticSalmon]

option の colors には色指定の文字列を「配列」で指定するのではないでしょうか。

let seriesOptions = {
...
...
}

として初期化しているのも、
本来は配列として指定するようになっていたのではないでしょうか。
入れ子のオブジェクトとして初期化して、
それを何故か単純な配列に変換した後に
その単品要素を渡しているので...不思議な感じがしました。

オブジェクトとしての初期化の際に色指定文字列を[]で囲んでおくか

.setOption("colors", [colors[color]])

としてみると指定の色になりますでしょうか。

これで指定の色になるようでしたら、
直接一つの色を指定すると正しくなったときの
指定の方法が気になります。

[atlanticSalmon]

// 必要なだけデータ系列の色を設定してください
というコメントにあるとおり系列ごとの色指定を行うのであれば、
.setOption("colors", colors)
として配列のまま渡すのもありではないでしょうか。
引数colorの意味がなくなりますが...

その場合は、
オプション設定の前に
for (let i = 0; i < color; i++) {
colors.push(colors.shift());
}
とするとか。

[matsu_ph]

.setOption("colors", [colors[color]])こちらの方法で、できました！ありがとうございます。

直接、一つの色を指定すると正しくなったときは、純粋に.setOption("colors", "#8AB3F8" )としたら、できました。

[atlanticSalmon]

私の環境ではできませんでした。
そちらでは、今でもできるのですね。
グラフの種類で違いがあるのかもしれません。

[matsu_ph]

今回は折れ線グラフだったのですが…配列の部分、いまいち理解できてないのですが、勉強になりました。ありがとうございます！

よろしければ、回答の部分にコメントいただければ、そちらで解決済みとさせていただきます。

[atlanticSalmon]

> .setOption("colors", "#8AB3F8" )としたら、できました。

ということですから、
もともと正しく動いていたコードで自己解決したということだと思います。

[matsu_ph]

ご丁寧にありがとうございます！
.setOption("colors", [colors[color]])の部分が僕はわからなかったので、pgFruitさんに教えていただいたので、そちらで解決にしたいなと思った次第です。

[matsu_ph]

.setOption("colors", colors[color])ではなく.setOption("colors", [colors[color]])
pgFruitさんありがとうございました！

Answer 1

.setOption("colors", colors[color])ではなく.setOption("colors", [colors[color]])

pgFruitさんありがとうございました！