Как добавить более одной диаграммы Google на страницу из одной и той же таблицы Google, но с разным диапазоном - PullRequest
Новая
       49

Как добавить более одной диаграммы Google на страницу из одной и той же таблицы Google, но с разным диапазоном

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

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

data

Я пытаюсь создать панель мониторинга с 2 таблицами и линейной диаграммой на основе моих данных.

Мне удалось создать одну таблицу и линейную диаграмму, ранее полученную из того же диапазона данных, но У меня возникают трудности при создании 2 разных таблиц, источник данных которых находится на одном листе Google, но в другой ячейкедиапазон.

Вот мой код.

Код 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 data1 = sheet.getDataRange({A6: F16}).getValues();
  var data2 = sheet.getDataRange({A1: F4}).getValues();
  var rows = {data1: data1,data2: data2};

  return rows;
}

Код 2 

<!DOCTYPE html>
<html>

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

<body>

  <div id="line"></div>
  <div id="table1"></div>
  <div id="table2"></div>

  <script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    
    google.charts.load('current', {'packages':['table']});
    
    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 options = {
        title: 'SPC Chart',
        legend: 'none',
        chartArea: {
          width: '60%'
        },
        vAxis: {
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 12
          }
        }
      };

      
      var chart = new google.visualization.LineChart(document.getElementById("line"));
      chart.draw(data1, options);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: true, width: '50%', height: '100%'});
      
      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'});

    }
  </script>
</body>

</html>

Я совсем новичок и не знаю, как поступить.

1 Ответ

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

Следующий код помог мне достичь того, что я хотел.

Код 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 data2 = sheet.getRange('A1:F5').getValues();
  var firstrow = 6; // 6th row
  var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
  var data1 = range.getValues();
  //var data1 = sheet.getRange('A6:F15').getValues();
  rows   = {data1: data1, data2: data2};

  return rows;

Код 2 

<!DOCTYPE html>
<html>

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

<body>

  <div id="line"></div>
  <div id="table1"></div>
  <div id="table2"></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 data2 = google.visualization.arrayToDataTable(rows.data2, false);
      
      var data1 = google.visualization.arrayToDataTable(rows.data1, 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 chart = new google.visualization.LineChart(document.getElementById("line"));
      chart.draw(data1, options);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: true, width: '50%', height: '100%'});
      
      

    }
  </script>
</body>

</html>
...