@nerikesi
Revisions
Report this question
Subscribe question
Help us understand the problem. What is going on with this question?
Q&A
Closed

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

疑問に思う事

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

やりたいこと

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

読んだドキュメント

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

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を使用する場合は優先されます。

手順

  1. Spreadsheet上にSpreadsheetのUI操作でグラフを挿入。
  2. Spreadsheet上でGASのCodeを作成。
  3. 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.maxvAxis.viewWindow.minで目的を達成することが出来ます。しかし、vAxis.viewWindowModemaximizedが期待通りに動作するなら、こんな無駄な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.viewWindowModeexplicitにしています。
本来はこれをしなくてもvAxis.viewWindowModeがデフォルト値なら、vAxis.viewWindow.maxvAxis.viewWindow.minが作用するみたいですので、実際は必要ありませんが、viewWindowModeをデフォルト値に戻す方法が分からなかったので、テストをやるたびに、グラフを作り直すのは面倒くさく、とりあえずexplicitにしています。

MaterialCode と ClassicCode

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

が、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操作で挿入されたグラフから何も触ってない状態。
log1.png
上の画像からわかることは、MaximizedFunc()実行によりvAxis.viewWindowModemaximizedが設定されたが、グラフの見た目上は変化が無かった。ということ。
log2.png
「つくりたて」⇒「ExplicitFunc()」は、想定通りの表示とOption値。
log3.png
ExplicitFunc()」⇒「MaximizedFunc()」はOption値は、想定通りだが、グラフの表示が意味不明。
グラフ下側に意味の解らない空白領域が出現した。
手持ちの情報から、どうしてこの様になるのかを説明するのは不可能だ。ただ、maximizedは、Referenceに書かれている通りに動作していないのは明らかです。
つまりこれはバグだと思います。
従いまして、この質問はクローズするつもりですが、もう少し調べてみますので、ご意見があれば、書き込み頂ければありがたいです。

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

やっと見つけました:v:
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をやるのは常識みたいに書かれているのは知っていましたが、仕事でプログラムしてないし、そこまでしなくていいんじゃないかと思っていましたが、うーん。

0
No Answers yet.
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login