同じスプレッドシートから複数のグラフと表を作成するGoogleアプリスクリプトですが、列が異なると範囲が異なります

サイラム

現在、Google App Scriptを使用して、同じスプレッドシートの異なる範囲と異なる列から複数のグラフと表を作成するのが困難になっています。

これが私のデータソースの画像です

同じスプレッドシートの異なる範囲で同じ列のデータソースを使用して、複数の表とグラフを作成することができました。赤と青で強調表示されたテーブル。しかし、同じスプレッドシートの別の列にある3番目のテーブルがあり、コードに基づいて公開されていません。

これが私のコードです

code.gs

function doGet(e) {
  
  return HtmlService
  .createTemplateFromFile("Line Chart multiple Table")
  .evaluate()
  .setTitle("Google Spreadsheet Chart")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
}

function getSpreadsheetData() {
  
  var ssID  = "1qkDFf4sYMgPZhGAoEf7vrXbBPmno6Tt4UT_zd5M8xLo";
  var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
  var firstrow = 6; //11th row
  var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
  var data1 = range.getValues();
  var data2 = sheet.getRange('A1:F5').getValues();
  var data3 = sheet.getRange('H10:M16').getValues();
  
  rows   = {data1: data1, data2: data2, data3: data3};

  return rows;
   
}

折れ線グラフ複数Table.HTML

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

  <div id="lineoverall"></div>
  <div id="linechartweekly"></div>
  <div id="table1"></div>
  <div id="table2"></div>
  <div id="table3"></div>
  

  <script>
    google.charts.load('current', {'packages':['table']});
    
    google.charts.load('current', {packages: ['corechart', 'line']});
     
    google.charts.setOnLoadCallback(getSpreadsheetData);

    function getSpreadsheetData() {
    google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
    
    }

    function drawChart(rows) {
    
         
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);
      
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);
      
      var data3 = google.visualization.arrayToDataTable(rows.data3, false);
      
    
      
      var options = {
        title: 'SPC Chart',
        legend: 'none',
        chartArea: {
          width: '60%'
        },
        vAxis: {
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 12
          }
        }
      };

      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'});
      
      var chart1 = new google.visualization.LineChart(document.getElementById("lineoverall"));
      chart1.draw(data1, options);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: false, width: '50%', height: '100%'});
      
      var table3 = new google.visualization.Table(document.getElementById("table3"));
      table3.draw(data3, {showRowNumber: false, width: '50%', height: '100%'});
      
      var chart2 = new google.visualization.LineChart(document.getElementById("linechartweekly"));
      chart2.draw(data3, options);
    
  
    }
  </script>
</body>

</html>

私はこのスクリプトを静かに新しくしました。どんな種類の助けも大歓迎です。

サイラム

コードは正しいです。問題はデータソースにありました。当初、日付3-範囲H10：M16のデータソースには列IDがありませんでした。画像で強調表示されているように列IDを追加した後、機能しました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-07-10

コメントを追加

サインイン

前の投稿：ノーチラスに戻す

TOP 一覧

記事

同じスプレッドシートから複数のグラフと表を作成するGoogleアプリスクリプトですが、列が異なると範囲が異なります

同じスプレッドシートから複数のグラフと表を作成するGoogleアプリスクリプトですが、列が異なると範囲が異なります

コメントを追加

関連記事

TOP 一覧

Unity：未知のスクリプトをGameObject（カスタムエディター）に動的にアタッチする方法

セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？

Ansibleで複数行のシェルスクリプトを実行する方法

tkinterウィンドウを閉じてもPythonプログラムが終了しない

Crashlytics：コンパイラー生成とはどういう意味ですか？

GoDaddyでのCKEditorとKCfinderの画像プレビュー

Windows 10 Pro 1709を1803、1809、または1903に更新しますか？

Chromeウェブアプリのウェブビューの高さの問題

モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます

Windows 10の起動時間：以前は20秒でしたが、現在は6〜8倍になっています

Reactでclsxを使用する方法

ファイル内の2つのマーカー間のテキストを、別のファイルのテキストのセクションに置き換えるにはどうすればよいですか？

MLでのデータ前処理の背後にある直感

グラフからテーブルに条件付き書式を適用するにはどうすればよいですか？

Pythonを使用して同じ列の同じ値の間の時差を取得する方法

mutate_allとifelseを組み合わせるにはどうすればよいですか

ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか？

テキストフィールドの値に基づいて UIslider を移動します

BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法

PowerShellの分割ファイルへのヘッダーの追加

ソートされた検索、ターゲット値未満の数をカウント

ホットタグ

アーカイブ