按照电子表格的选项卡顺序创建多个图表

问题描述 投票：0回答：1

我尝试在Web应用程序中按名为Company 1的电子表格的选项卡顺序插入多个图表。但是每次刷新我的页面时顺序都会改变。有人知道我可以做什么来按选项卡顺序显示图表？如果可能的话，我想在 h1 标签中显示服务名称（形成选项卡名称）。

预期结果： enter image description here 这是我的网络应用程序的链接和进入图表的数据的链接。

代码.gs：

const classeur = SpreadsheetApp.getActiveSpreadsheet(); const fBDD = classeur.getSheetByName("BDD"); const fStaff = classeur.getSheetByName("Staff"); function doGet() { return HtmlService.createTemplateFromFile("Index").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); } function include(filename){ return HtmlService.createHtmlOutputFromFile(filename).getContent(); } function indicateursSFMC(i) { let classeurService = SpreadsheetApp.openById("1hqJ9WvlrWonsxAI5t4IvapL29JO1vBKCvDlfhKmSLIg"); let feuille = classeurService.getSheets()[i]; const [[ ,...head], ...values] = feuille.getRange(1,1,feuille.getLastRow(),feuille.getLastColumn()).getValues().filter(d=>d[0] != ""); const obj = [...Map.groupBy(values, ([a]) => a)].reduce((o, [k, v]) => { const [, ...data] = v[0].map((_, col) => v.map((row) => row[col] || null)); const [header, ...rows] = data.map((r, i) => [(i == 0 ? "#" : head[i]), ...r]); o[k] = { header, rows }; return o; }, {}); return obj; } 
索引.html：

<!DOCTYPE html>
 <html>
   <head>
     <base target="_top">
     <?!= include('JavaScript'); ?>
     <?!= include('CSS'); ?>
   </head>
   <body>
     <p id="serviceUtilisateurMC" style="display:none"></p>
     <p id="nbServiceUtilisateurMC" style="display:none"></p>
     <p id="idClasseurMC" style="display:none"></p>

     <div id="divGraphiquesMC" class="graphics"></div>
   </body>
   <script>
     document.addEventListener("DOMContentLoaded",loadGraphicsMC);
   </script>
 </html>

JavaScript.html：

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-radar.min.js"></script>

<script>
  function loadView(options){
    var id = typeof options.id === "undefined" ? "app" : options.id;
    var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
  }
  function loadGraphicsMC(){
    loadView({func: "loadSearchView", callback: showGraphicsMC()});
  }
  function showGraphicsMC(){
    var titre = "";
    for (let i = 0; i < 4; i ++){
      let allData;
      google.script.run.withSuccessHandler(values => {
        allData = values;
        const keys = Object.keys(allData);
        if (isOdd(i) === 1){ titre = "Big Skill 2"; }
        else{ titre = "Big Skill 1"; }
        graphiqueMC(allData[keys[0]],"divGraphiquesMC",titre);
      }).indicateursSFMC(i);
    }
  }

  function isOdd(num) { return num % 2;}

  function graphiqueMC(chartData,divContainer,titre) {
    var chart = anychart.radar();
    chart.defaultSeriesType('line');
    chart.data(chartData);
    chart.palette(['#ffcc99', '#ffcccc', '#ff99cc', '#cc99ff', '#ccccff', '#99ccff', '#baf4f4', '#99ffcc', '#ccffcc', '#ccff99']);
    chart.yAxis().stroke('#545f69');
    chart.yAxis().ticks().stroke('#545f69');
    chart.yGrid().palette(['gray 0.05', 'gray 0.025']);
    chart.yScale().ticks().interval(1);
    chart.yScale().minimum(0);
    chart.yScale().maximum(5);
    chart.xGrid().stroke({
      color: "#545f69",
      thickness: 0.5,
      dash: "10 5"
    });
    chart.interactivity().hoverMode('by-x');
    var background = chart.background();
    background.stroke("3 #0d5973");
    background.cornerType("round");
    background.corners(20);
    chart.markerPalette(['round']);
    chart.tooltip()
      .displayMode('union')
      .useHtml(true)
      .format(function (e) {
        return '<span style="color:' + this.series.color() + '">' +
          this.seriesName + ": " + this.value + "</span>"
      });
    chart.legend()
      .align('center')
      .position('center-bottom')
      .enabled(true);
    chart.title(titre);
    chart.container(divContainer);
    chart.draw();
  }
</script>

感谢 Tanaike 
您之前的帮助在我的 html 页面中插入图表。
    

	


google-apps-script

charts

anychart


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
关于您当前的问题
But the order change for each refresh of my page.
，当我看到您的显示脚本时，我猜测您当前问题的原因可能是由于
google.script.run
是使用异步进程运行的。那么，作为对您的显示脚本的简单修改，以下修改如何？


在此修改中，您的 Javascript 端函数 
showGraphicsMC
 被修改。


来自：


function showGraphicsMC(){
  var titre = "";
  for (let i = 0; i < 4; i ++){
    let allData;
    google.script.run.withSuccessHandler(values => {
      allData = values;
      const keys = Object.keys(allData);
      if (isOdd(i) === 1){ titre = "Big Skill 2"; }
      else{ titre = "Big Skill 1"; }
      graphiqueMC(allData[keys[0]],"divGraphiquesMC",titre);
    }).indicateursSFMC(i);
  }
}

致：


// I added this function.
/**
 * syncGoogleScriptRun for Javascript library
 * GitHub  https://github.com/tanaikech/syncGoogleScriptRun
 *
 * Run google.script.run with the synchronous process.
 * @param {Object} resource the object for using syncGoogleScriptRun.
 * @return {Object} Returned value from the function of Google Apps Script side.
 */
const syncGoogleScriptRun = resource => {
  return new Promise((resolve, reject) => {
    google.script.run.withFailureHandler(e => reject(e)).withSuccessHandler(e => resolve(e))[resource.gasFunction](resource.arguments);
  });
};

// Also, I modified this function.
async function showGraphicsMC() {
  var titre = "";
  let allData;
  for (let i = 0; i < 4; i++) {
    const resource = { gasFunction: "indicateursSFMC", arguments: i };
    allData = await syncGoogleScriptRun(resource).catch(e => { throw new Error(e) });
    const keys = Object.keys(allData);
    if (isOdd(i) === 1) {
      titre = "Big Skill 2";
    } else {
      titre = "Big Skill 1";
    }
    graphiqueMC(allData[keys[0]], "divGraphiquesMC", titre);
  }
}



    通过此修改，
  • google.script.run
     与循环中的同步进程一起运行。
    

    • 
    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.