主页 / coding / 问题 / 79149237
Accepted
GowlDesign
Asked: 2024-11-02 03:43:24 +0800 CST

按照电子表格的标签顺序创建多个图表

  • 772

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

预期结果： 在此处输入图片描述 这是我的 Web 应用程序的链接和进入图表的数据的链接。

代码.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

1 个回答

  1. Best Answer

    关于你现在的问题But the order change for each refresh of my page.，我看到你的展示脚本的时候，就猜想你现在的问题可能是因为google.script.run使用异步进程运行导致的。那么，作为对展示脚本的简单修改，你觉得如何？

    这个修改就是你showGraphicsMCJavascript端的函数被修改了。

    从：

    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 => 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可以在循环中运行同步过程。

    额外：

    作为另一种方法，当从源电子表格中的所有工作表检索所有值时，以下修改如何？在此修改中，修改了 Google Apps Script 和 Javascript。

    Google 应用脚本：Code.gs

    请将以下功能添加到Code.gs。

    function getValues() {
  const ss = SpreadsheetApp.openById("1hqJ9WvlrWonsxAI5t4IvapL29JO1vBKCvDlfhKmSLIg");
  const sheets = ss.getSheets();
  const ar = sheets.map(feuille => {
    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;
  });
  return ar;
}

    Javascript：JavaScript.html。

    请修改如下的showGraphicsMC功能。JavaScript.html

    function showGraphicsMC() {
  google.script.run.withSuccessHandler(ar => {
    ar.forEach((allData, i) => {
      const keys = Object.keys(allData);
      const titre = isOdd(i) === 1 ? "Big Skill 2" : "Big Skill 1";
      graphiqueMC(allData[keys[0]], "divGraphiquesMC", titre);
    });
  })
  .getValues();
}
    • 2

相关问题