Переместите / настройте расположение диаграмм и таблиц на панели инструментов - Google Script - PullRequest
Новая
       10

Переместите / настройте расположение диаграмм и таблиц на панели инструментов - Google Script

0 голосов
/ 22 декабря 2018

Я построил панель инструментов с комбо линейных графиков и таблиц.Одна из таблиц определяет свойство Dashboard, которое я хочу расположить сверху.В настоящее время его автоматически позиционируется в нижней части панели инструментов.Невозможно переместить его и расположить сверху.

Данные моего источника выглядят так

enter image description here

Моя панель инструментов выглядит следующим образом.

enter image description here

Вот код, который я разработал для создания панели инструментов.

Код 1 

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('H2:M9').getValues();
  
  rows   = {data1: data1, data2: data2, data3: data3};

  return rows;
   
}

Код 2 

<!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 options1 = {
        title: 'SPC Chart overall',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Yellow', 'blue', 'Yellow', 'Red'],
        pointSize: 3,
              
      };
      
      var options2 = {
        title: 'SPC Chart weekly',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Yellow', 'blue', 'Yellow', 'Red'],
        pointSize: 3,
      };
      
      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, options1);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: false, width: '50%', height: '200'});
         
      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, options2);
    
  
    }
  </script>
</body>

</html>

какую часть моего кода я должен изменить, чтобы изменить положение моего стола.Проверил онлайн, но не смог найти много источников, чтобы получить мою цель.Буду признателен за любую оказанную помощь.

...