繁体   English   中英

通过按钮Google表格重新加载已部署的html页面

reload deployed html page from a button Google sheets

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个D3图表,已将其部署为HTML页面,我想通过一个button刷新此页面

当我单击按钮时,页面没有刷新,图表消失了

如果我手动刷新页面, chart将返回。 您可以在这里看到:

https://script.google.com/macros/s/AKfycbwaU-Pd6Q9sLmW_xXRQ31m1BsFIJlwYR9yGD6Lk0MYEHxMj294jujE/exec

我有

 <!DOCTYPE html> <meta charset="utf-8"> <!-- styles --> <html> <head> <?!= HtmlService.createHtmlOutputFromFile("styles.css").getContent(); ?> </head> <body> <div class="content"> <h1>d3 chart powered by data from Google Sheet</h1> <input type="button" value="Reload Page" onClick="document.location.reload(true)"><br> </div> <svg class="chart" width = "500" height = "500"></svg> <!-- javascript --> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> <?!= HtmlService.createHtmlOutputFromFile("chart.js").getContent() ?> <?!= HtmlService.createHtmlOutputFromFile("main.js").getContent() ?> </body> </html>

谢谢

我的谷歌表

https://docs.google.com/spreadsheets/d/1zCKRQsFB7kBTok9bBSvjQCUfi_KZm-d67kvXg0oHwN8/edit?usp=sharing

<!-- This is the chart javascript -->
<script>
// initial function to create the bar chart
//var drawChart = function (data) {
    <!-- This is the chart javascript -->
    var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vT4fnK2E-rkcviT3CnxTPzYeh1uuPJFIwBnyJDj2UhnGBXu2oR2UL6sQODm_5VNV3Ski3rXExxP_u_U/pub?gid=224302262&single=true&output=csv", function(error, data) {
            if (error) {
               throw error;
            }
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
</script>
问题暂未有回复.您可以查看右边的相关问题.
3 将单元格值从Google表格链接到HTML页面

我是新手,对网页设计/代码方面很基础。 我真正能做的只是基本的html,甚至CSS或Javascipt。 我读过的问题教程也很令人困惑。 因此,我希望有人可以提供帮助: 从本质上讲,我想要做的是:我希望我的网站始终在我的Google工作表中显示单元格A1的值(无格式或其他任何内容,仅 ...

4 根据用户输入将数据从 Google Sheets 拉取到 html 页面

我有一个 Google 电子表格,其中四列中有几行数据,其标题是 员工 ID | 姓名 | 年龄 | 名称 | 我想创建一个 web 应用程序(带有表单元素的 html 页面),如果我在文本字段中输入员工 ID 值(这是唯一的)并单击提交,其他三个详细信息(即姓名、年龄、名称)只有该特定员工的姓名 ...

5 如何从Google表格搜索数据并在HTML页面中显示

我在Google工作表中有一个数据库。 我想搜索人员的ID,并在HTML页面中显示人员的完整详细信息。 我怎样才能做到这一点? 请帮我。 谷歌表链接: https : //docs.google.com/spreadsheets/d/1veRyOmIBIQ0HS4YfL9s7shGg ...

2019-08-28 07:30:51 0 16   html
6 从谷歌表格中删除按钮

我在尝试从 Google 工作表中删除按钮时遇到问题,我有一个脚本,该脚本采用“主工作表”并将其转换为 pdf,然后将其作为附件发送,一切正常,但我无法删除它出现在 pdf 中的按钮“保存更改”我搜索并发现按钮是图像,因此我尝试了以下操作: 但这不起作用,以下是当前代码: ...

7 将Google表格与网页HTML同步

我可以将Google工作表与网页表单进行同步的最简单方法是什么(参见附图)? 理想情况下是示例代码或教程。 这就是我想要的:我希望用户访问我的网页,以便他们可以从下拉菜单中选择自己的姓名,并将其放在所需的项目旁边。 然后,一旦他们单击“提交”,每个人的姓名值就会从网页中转移出来,然后记 ...

8 从Google表格中的按钮启动表单

如果我在这里问得太多,请原谅我。 如果查询太大,我会将其分成几篇文章。 这是我的第一个GAS项目,因此... 我希望工作表用户能够通过单击工作表中的按钮来启动表单。 该表格应预先填充该行中的某些信息。 用户可以填写表单中的其他字段。 提交表单后,我需要将所有回复收集在工作表的另一 ...

10 UpdatePanel不会阻止按钮重新加载页面

我只是想通过制作一个简短的原型来测试UpdatePanel功能,以在链接按钮单击时禁用ASP.NET页面重新加载,从而简化此问题的示例 。 我已经看到了这样的问题这种方法此 。 为了测试这一点,我创建了一个新的ASP.NET WebForms应用程序,添加了一个由UpdatePanel替代的 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM