在 Google 可视化中添加新数据行

Question

我正在尝试制作动态 Google 折线图。我正在从 Google Sheet 获取我的数据表。我在 html 中添加了 eventlistener 来更新数据行。这样，现有数据行就会得到更新。我的目标是从图表中删除现有数据行和新数据行。

Code.gs:

function getTableDataTV(){
  //Chart load with this datatable
  const ws = SpreadsheetApp.openById("").getSheetByName("Sheet 1"); //2nd worksheet ID
  const data = ws.getRange (2,1,ws.getLastRow() -1, 9).getDisplayValues();
 
return data

}

function getvoddata() {
//new data table for eventlistener
  const ss = SpreadsheetApp.openById("");//2nd worksheet ID
  const sw = ss.getSheetByName("Sheet 2");
  var finaldata = sw.getRange (2,1,sw.getLastRow() -1, 9).getDisplayValues();
  return finaldata
}

HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
            google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(getData);
      var chart;
      var options;

function getData(){
google.script.run.withSuccessHandler(drawChart).getTableDataTV();
}
          function drawChart(dataReturned) {

      data = new google.visualization.DataTable();
      data.addColumn('date', 'Days');
      data.addColumn('number', 'A');
      data.addColumn('number', 'B');
      data.addColumn('number', 'C');
      data.addColumn('number', 'D');
      var newData =  dataReturned.map(r => [new Date(r[0].slice(6,10),r[0].slice(0,2),r[0].slice(3,5)), parseInt(r[1]),parseInt(r[2]),parseInt(r[3]),parseInt(r[4])]);

      data.addRows(newData);
       options = {
             
          title: 'Total Views',
          subtitle: 'ABP News Vs Competitor Channels'
           
            };
       chart = new google.charts.Line(document.getElementById('chart'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

//Update Data Row

document.getElementById("pd1").addEventListener("click",newchart);
function newchart(){
google.script.run.withSuccessHandler(updateChart).getvoddata();
}
    function updateChart(newdataReturned) {
       
                   
 data = new google.visualization.DataTable();
      data.addColumn('date', 'Days');
      data.addColumn('number', 'A');
      data.addColumn('number', 'B');
      data.addColumn('number', 'C');
      data.addColumn('number', 'D');
      var newData =  newdataReturned.map(r => [new Date(r[0].slice(6,10),r[0].slice(0,2),r[0].slice(3,5)), parseInt(r[1]),parseInt(r[2]),parseInt(r[3]),parseInt(r[4])]);

      data.addRows(newData);           

          // redraw the chart.
          chart.draw(data, options);        
      
      }
        
    </script>
.....
<body>...
<a id="pd1">VOD</a>
<div id="chart" style="width: 1000px; height: 400px"></div>
</body>

添加以下行时，控制台也出现错误：

document.getElementById("pd1").addEventListener("click",newchart);

错误： Uncaught TypeError: document.getElementById(...) is null

我从这个 website and it is working on jsfiddle 得到了这个 updatefunction。请检查，我在这里做错了什么。

谢谢

Answer 1

你的情况，下面的修改怎么样？

修改后的脚本：

本次修改，修改了你的HTML和Javascript。我以为当我看到你的 HTML 和 Javascript 时，你的 HTML 中没有显示按钮，而且没有显示用于插入图表的容器。而且，当我根据这些情况修改你的 HTML 和 Javascript 以及你的 jsfiddle 中显示的示例脚本时。

<div id="chart"></div>
<button id="pd1">update chart</button>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(getData);
var chart;
var data;
var options;

document.getElementById("pd1").addEventListener("click", newchart);

function getData() {
  google.script.run.withSuccessHandler(drawChart).getTableDataTV();
}

function newchart() {
  google.script.run.withSuccessHandler(updateChart).getvoddata();
}

function drawChart(dataReturned) {
  data = new google.visualization.DataTable();
  data.addColumn('date', 'Days');
  data.addColumn('number', 'A');
  data.addColumn('number', 'B');
  data.addColumn('number', 'C');
  data.addColumn('number', 'D');
  var newData = dataReturned.map(r => [new Date(r[0].slice(6, 10), r[0].slice(0, 2), r[0].slice(3, 5)), parseInt(r[1]), parseInt(r[2]), parseInt(r[3]), parseInt(r[4])]);
  data.addRows(newData);
  options = { title: 'Total Views', subtitle: 'ABP News Vs Competitor Channels' };
  chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

function updateChart(newdataReturned) {
  data = new google.visualization.DataTable();
  data.addColumn('date', 'Days');
  data.addColumn('number', 'A');
  data.addColumn('number', 'B');
  data.addColumn('number', 'C');
  data.addColumn('number', 'D');
  var newData = newdataReturned.map(r => [new Date(r[0].slice(6, 10), r[0].slice(0, 2), r[0].slice(3, 5)), parseInt(r[1]), parseInt(r[2]), parseInt(r[3]), parseInt(r[4])]);

  data.addRows(newData);
  chart.draw(data, options);
}
</script>

注：

在此修改中，它假定您在 Google Apps 脚本 return 中的函数 getTableDataTV() 和 getvoddata() 是您期望的正确值。请注意这一点。

在 Google 可视化中添加新数据行

Add new Data Row in Google Visualisation

javascript

html

google-apps-script

google-visualization

修改后的脚本：

注：