将表格中的数据动态集成到 Web 应用程序中以提供图形

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

我正在设置一个带有图形的网络应用程序。我正在使用 anyChart 库来实现此目的。

我在从表格文件添加数据时遇到问题。当数据在 JavaScript 中硬编码时，它可以正常工作。但是，数据会有所不同，我希望 JavaScript 在加载页面时从我的表格中检索所有数据。

测试.html：

<!DOCTYPE html>
 <html>
   <head>
     <base target="_top">
     <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
     <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
     <style>
       html, body, #container {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
       }
     </style>
     <script>
       anychart.onDocumentReady(function () {
         // create a data set
         var chartData = {
           header: ['#', 'John EDWARD', 'Emma SMITH', 'Tony MARTIN', 'Elijah LUTHER'],
           rows: [
             ['Skill 1', 1, 2, 5, 4],
             ['Skill 2', 4, 5, 2, 1],
             ['Skill 3', 3, 3, 5, 1],
             ['Skill 4', 2, 1, 3, 5],
             ['Skill 5', 4, 2, 5, 5],
             ['Skill 6', 3, 5, 4, 5],
             ['Skill 7', 2, 2, 5, 3],
             ['Skill 8', 1, 4, 3, 5]
           ]
         };
         // create a radar chart
         var chart = anychart.radar();
         // set the series type
         chart.defaultSeriesType('Spline Area');
         // set the chart data
         chart.data(chartData);
         // set the color palette
         chart.palette(['#E5593499', '#9BC53DE6', '#64B5F6BF','#8d64f6']);
         // configure the appearance of the y-axis
         chart.yAxis().stroke('#545f69');
         chart.yAxis().ticks().stroke('#545f69');
         // configure the stroke of the x-grid
         chart.xGrid().stroke({
           color: "#545f69",
           thickness: 0.5,
           dash: "10 5"
         });
         // configure the appearance of the y-grid
         chart.yGrid().palette(['gray 0.05', 'gray 0.025']);
         // begin the y-scale at 0
         chart.yScale().minimum(0);
         chart.yScale().maximum(5);
         // set the y-scale ticks interval
         chart.yScale().ticks().interval(1);
         // set the hover mode
         chart.interactivity().hoverMode('by-x');
         // set the marker type
         chart.markerPalette(['round']);
         // improve the tooltip
         chart.tooltip()
           .displayMode('union')
           .useHtml(true)
           .format(function(e){
             console.log(this);
             return '<span style="color:' + this.series.color() + '">' + 
               this.seriesName + ": " + this.value + "</span>"
           });
         // set chart legend settings
         chart.legend()
           .align('center')
           .position('center-bottom')
           .enabled(true);
         // set the chart title
         chart.title("Title");
         // set container id for the chart
         chart.container('container');
         // initiate chart drawing
         chart.draw();
     });
   </script>
 </head>
 <body>
   <div id="container"></div>
 </body>

代码.gs：

function doGet() {
   var htmlOutput = HtmlService.createTemplateFromFile('Test');
   return htmlOutput.evaluate();  
 }

这是我的文件。

我想自动集成“Sheet1”选项卡中的数据。

此外，由于有多家公司，我想要一个下拉菜单来根据所做的选择更新数据，同时考虑到技能可能因公司而异。

预先感谢您的帮助。

google-apps-script charts
1个回答
0
投票

虽然我不确定是否能正确理解你的预期结果，但是下面的修改怎么样？

修改后的脚本：

Google Apps 脚本：
code.gs

function doGet() {
  var htmlOutput = HtmlService.createTemplateFromFile('Test');
  return htmlOutput.evaluate();
}

// I added this function.
function getValues() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const [[, ...head], ...values] = sheet.getDataRange().getValues();
  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：
Test.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
    let allData;

    google.script.run.withSuccessHandler(values => {
      allData = values;
      const keys = Object.keys(allData);
      const dropdown = document.getElementById("dropdown");
      keys.forEach(k => {
        const o = document.createElement('option');
        o.value = k;
        o.text = k;
        dropdown.appendChild(o);
      });
      drawChart(allData[keys[0]]);
    })
      .getValues();

    function selected(k) {
      document.getElementById("container").innerHTML = "";
      drawChart(allData[k]);
    }

    function drawChart(chartData) {
      // create a radar chart
      var chart = anychart.radar();

      // set the series type
      chart.defaultSeriesType('Spline Area');

      // set the chart data
      chart.data(chartData);

      // set the color palette
      chart.palette(['#E5593499', '#9BC53DE6', '#64B5F6BF', '#8d64f6']);

      // configure the appearance of the y-axis
      chart.yAxis().stroke('#545f69');
      chart.yAxis().ticks().stroke('#545f69');

      // configure the stroke of the x-grid
      chart.xGrid().stroke({
        color: "#545f69",
        thickness: 0.5,
        dash: "10 5"
      });

      // configure the appearance of the y-grid
      chart.yGrid().palette(['gray 0.05', 'gray 0.025']);

      // begin the y-scale at 0
      chart.yScale().minimum(0);
      chart.yScale().maximum(5);

      // set the y-scale ticks interval
      chart.yScale().ticks().interval(1);

      // set the hover mode
      chart.interactivity().hoverMode('by-x');

      //  set the marker type
      chart.markerPalette(['round']);

      // improve the tooltip
      chart.tooltip()
        .displayMode('union')
        .useHtml(true)
        .format(function (e) {
          console.log(this);
          return '<span style="color:' + this.series.color() + '">' +
            this.seriesName + ": " + this.value + "</span>"
        });


      // set chart legend settings
      chart.legend()
        .align('center')
        .position('center-bottom')
        .enabled(true);

      // set the chart title
      chart.title("Title");

      // set container id for the chart
      chart.container('container');

      // initiate chart drawing
      chart.draw();
    }
    </script>
  </head>
  <body>
    <select id="dropdown" onchange="selected(this.value)"></select>
    <div id="container"></div>
  </body>
</html>

测试：

使用示例电子表格时，将获得以下结果。

来自：

enter image description here

致：

enter image description here

注：

参考资料：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.