@nerikesi (Nerikesi)posted at 2021-02-21

vAxis.viewWindowModeのmaximizedが期待通りに動作しない。

Q&A

Closed

疑問に思う事

Google Spreadsheet 上の折れ線グラフを、GASを使用して編集しようとしています。
その際にグラフの上下の余分な空白を除去したいと考え、公式ドキュメントを調べた結果、vAxis.viewWindowModeというOptionにmaximaizedという値が存在する事を知りました。
これを使用する事で、問題の解決ができると思ったのですが、期待通りに動作しません。
私が勘違いしているのでしょうか。
その辺の事がわかる人がいたら教えて欲しいです。

やりたいこと

以下の画像は、下の方に書いてある「問題回避Code」を実行した場合です。
maximaizedではできないんでしょうか？というかmaximaizedはこれをする為のものではないんでしょうか？

読んだドキュメント

Home > Product > Charts > Guides > (Chart Types) > Line Charts > Configuration Options

私の認識だと以下の様に書かれています。

vAxis.viewWindowMode: グラフ領域内の値をレンダリングするために垂直軸をスケーリングする方法を指定します。次の文字列値がサポートされています。
pretty: 最大値と最小値がチャート領域の下部と上部の少し内側に描画されるように垂直軸をスケーリングします。 viewWindowは、数値の場合は最も近い主グリッド線に、日付と時刻の場合は最も近い副グリッド線に展開されます。
maximized: 最大値と最小値がグラフ領域の上下に触れるように垂直軸をスケーリングします。これによりvAxis.viewWindow.minとvAxis.viewWindow.maxは無視されます。
explicit: チャート領域の上部と下部のスケール値を指定するための非推奨のオプション。（vAxis.viewWindow.minおよびvAxis.viewWindow.maxと重複しているため非推奨）これらの値の外側のデータ値は切り取られます。 vAxis.viewWindowの最大値と最小値を説明するオブジェクトを指定する必要があります。

タイプ：文字列
デフォルト： 'pretty'と同等ですがvAxis.viewWindow.min、vAxis.viewWindow.maxを使用する場合は優先されます。

手順

Spreadsheet上にSpreadsheetのUI操作でグラフを挿入。
Spreadsheet上でGASのCodeを作成。
Spreadsheet上にボタンを配置し作成したGASの実行トリガーにする。

期待した通りに動かないCode

期待通りに動かないCode

function MaximizedFunc() {
  const sh = SpreadsheetApp.getActiveSheet();
  const ChartObj = sh.getCharts()[0].modify()
    .setOption("vAxis.viewWindowMode","maximized")
    .build();
  sh.updateChart(ChartObj);
}

自分で試したこと

問題の回避Code

例えば以下の様に、グラフが参照しているデータの最大値と最小値を求めれば、vAxis.viewWindow.maxとvAxis.viewWindow.minで目的を達成することが出来ます。しかし、vAxis.viewWindowModeのmaximizedが期待通りに動作するなら、こんな無駄なCodeを書かずに済みます。

問題回避Code

function ExplicitFunc(){
  const sh = SpreadsheetApp.getActiveSheet();

  const DataSauceValue = sh.getSheetValues(2,2,10,2);//実験なので直書き
  let myMax = DataSauceValue[0][0];
  let myMin = DataSauceValue[0][0];
  for(let i=0 ; i<DataSauceValue.length ; i++){
    for(let j=0 ; j<DataSauceValue[0].length ; j++){
      if(myMax < DataSauceValue[i][j]) myMax = DataSauceValue[i][j];
      if(myMin > DataSauceValue[i][j]) myMin = DataSauceValue[i][j];
    }
  }
  const ChartObj = sh.getCharts()[0].modify()
    .setOption("vAxis.viewWindowMode","explicit")//viewWindowModeがデフォルト値ならこの行は必要ない。
    .setOption("vAxis.viewWindow.max",myMax)
    .setOption("vAxis.viewWindow.min",myMin)
    .build();
  sh.updateChart(ChartObj);  
}

ちなみに、このCodeですが、vAxis.viewWindowModeをexplicitにしています。
本来はこれをしなくてもvAxis.viewWindowModeがデフォルト値なら、vAxis.viewWindow.maxとvAxis.viewWindow.minが作用するみたいですので、実際は必要ありませんが、viewWindowModeをデフォルト値に戻す方法が分からなかったので、テストをやるたびに、グラフを作り直すのは面倒くさく、とりあえずexplicitにしています。

MaterialCode と ClassicCode

Google Chart > Line Chart > Creating Material Line Charts
GoogleChartと言っても、ClassicChartとMaterialChartと2種類存在するっぽい。
ひょっとして、その辺りが問題の原因かと思い調べてみたものの、
SpreadsheetのUI操作で挿入されるグラフは、ClassicなのかMaterialなのかよくわからんし、参照していたドキュメント

Home > Product > Charts > Guides > (Chart Types) > Line Charts > Configuration Options

が、Classic対応なのか、Material対応なのかもよくわかりませんでした。

getOptions()で、Optionの値を読んでみた。

Optionを読み出しlogに出力するデバック用の即席の関数

function OptionLogger(WhereLog="読んだ場所不明"){
  console.log(WhereLog);//プログラム中のどこでログを読んだのか。
  const OptionObj = SpreadsheetApp.getActiveSheet().getCharts()[0].getOptions();

  const OptionName = [
    "vAxis.viewWindowMode",
    "vAxis.viewWindow.max",
    "vAxis.viewWindow.min"
  ];

  for(const myValue of OptionName){
    console.log(myValue +"："+ OptionObj.get(myValue));
  }

}

OptionLogger関数の使い方

function MaximizedFunc() {

  OptionLogger("■MaximizedFunc実行前■");//ここ

  const sh = SpreadsheetApp.getActiveSheet();
  const ChartObj = sh.getCharts()[0].modify()
    .setOption("vAxis.viewWindowMode","maximized")
    .build();
  sh.updateChart(ChartObj);

  OptionLogger("■MaximizedFunc実行後■");//ここ

}

「つくりたて」とは、SpreadsheetのUI操作で挿入されたグラフから何も触ってない状態。

上の画像からわかることは、MaximizedFunc()実行によりvAxis.viewWindowModeにmaximizedが設定されたが、グラフの見た目上は変化が無かった。ということ。

「つくりたて」⇒「ExplicitFunc()」は、想定通りの表示とOption値。

「ExplicitFunc()」⇒「MaximizedFunc()」はOption値は、想定通りだが、グラフの表示が意味不明。
グラフ下側に意味の解らない空白領域が出現した。
手持ちの情報から、どうしてこの様になるのかを説明するのは不可能だ。ただ、maximizedは、Referenceに書かれている通りに動作していないのは明らかです。
つまりこれはバグだと思います。
従いまして、この質問はクローズするつもりですが、もう少し調べてみますので、ご意見があれば、書き込み頂ければありがたいです。

Material Chartは、多くのオプションがサポートされていないらしい。

やっと見つけました
Tracking Issue for Material Chart Feature Parity

Currently, Material Charts are missing a lot of features that our users have come to expect from our Classic Charts. This bug exists to track the exhaustive list of missing features. This bug should stay open until all the features on the list have been implemented.

以下訳

現在、マテリアルチャートには、ユーザーがクラシックチャートに期待する多くの機能がありません。このバグは、不足している機能の完全なリストを追跡するために存在します。このバグは、リストのすべての機能が実装されるまで開いたままにする必要があります。

viewWindowModeもこのリストの中にありました。
もしも、SpreadsheetのUI操作で挿入されるChartが、Material Chart なのだとしたら、これでつじつまが合ったことになります。
でも、ひょっとしたら、Material でも Classic でもない第3の Chart なのかもしれませんが、未だにそのあたりがよくわかりません。

ちなみに、Optionのリストが書かれているReferenceに、Materialでの対応/非対応を書いて欲しいとありましたが、まったくその通りだと思います。なんで書かないんでしょうか。納得いきません。

話しがそれますが、非対応Optionのリストを示したこのページはGitHubなんですね。
色んな所で、GitHubをやるのは常識みたいに書かれているのは知っていましたが、仕事でプログラムしてないし、そこまでしなくていいんじゃないかと思っていましたが、うーん。

Are you sure you want to delete the question?