将电子表格数据添加到图表数据数组中

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

尽管我在其他地方找到了类似的帖子,但仍然无法解决我的问题。我想在Google电子表格的html侧边栏页面上加载位置,但是我发现的唯一示例是硬编码的位置。

这里是一个示例,在HTML页面上(我删除了API密钥):这个对我有用。

<body>

    <div class="container">   
        <div id="map_div" style="width: 500px; height: 500px"></div>
      </div> <!-- CLOSE CONTAINER -->

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

      google.charts.load("current", {
          "packages":["map"],
          "mapsApiKey": "xxxx"
      });

      google.charts.setOnLoadCallback(drawChart);
      function drawChart(arrayToData) {

        var data = new google.visualization.arrayToDataTable(

        [["Lat", "Long","Nom"],
           [45.7660889, 4.794056299999999, "Person1"], 
           [45.8167227, 4.8341048, "Person2"], 
           [45.7796433, 4.8037871, "Person3"], 
           [45.7780849, 4.921768399999999, "Person4"]]
           );

        var map = new google.visualization.Map(document.getElementById('map_div'));

        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });

      }//function drawChart() {

    </script>

  </body>

而且我想拥有类似的外观,其中数据位置不是硬编码的,而是来自电子表格数据:

      google.charts.setOnLoadCallback(drawChart);

      var ss = SpreadsheetApp.openByUrl("xxxx");
      var datatable = ss.getRange("listNamesAdresses");

      function drawChart(arrayToData) {

        var dataToArray=document.getElementById("listNamesAdresses");
        var data = new google.visualization.arrayToDataTable(
                         dataToArray
                    );

        var map = new google.visualization.Map(document.getElementById('map_div'));

       map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });

      }//function drawChart() {

我知道这是不正确的,但是我尝试了许多组合,但仍然无法解决。欢迎您的帮助!

这里是我所做的一个可分享的例子:Link to a copy of my Map Test

我从电子表格中改编了它,但超出了我的API密钥配额,因此我无法对其进行测试。希望一切都好!提前非常感谢

html google-maps google-apps-script google-visualization
1个回答
0
投票

[要结合使用Javascript中的可视化API以及通过Apps脚本检索电子表格数据-您需要使用WebApp

使用google.script.run将数据从服务器端传递到客户端

示例:

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index.html");
}

function getDatafromSheet(){
  var ss = SpreadsheetApp.openByUrl("xxxx");
  // getNamedRanges()[0] works if you have only one named range
  var datatable = ss.getNamedRanges()[0].getRange().getValues();
  return datatable;  
}

index.html

<body>
    <div class="container">   
        <div id="map_div" style="width: 500px; height: 500px"></div>
      </div> <!-- CLOSE CONTAINER -->

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

   window.onload = google.script.run.withSuccessHandler(onSuccess).getDatafromSheet();

   function onSuccess (arrayToData){
      google.charts.load("current", {
          "packages":["map"],
          "mapsApiKey": "AIzaSyDCKzjezYeUDd2ugtFnzokCIpV1YpLmmEc"
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.arrayToDataTable(arrayToData);

      var map = new google.visualization.Map(document.getElementById('map_div'));

        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });

      }
  }
    </script>
  </body>
© www.soinside.com 2019 - 2024. All rights reserved.