谷歌图表 - 从谷歌表格刷新数据而不刷新页面

Question

这里是编码新手，我有一个 WordPress 页面，其中显示了一个谷歌图表，其中包含来自谷歌表格的源数据，我试图让谷歌图表自动重绘/刷新数据，而无需手动刷新整个网页.

以下是我当前的代码，它仅在用户手动刷新整个网站时才刷新图表中的数据。

我已阅读有关 AJAX 的信息，这似乎是关键，但我无法使用 Google Developer 示例代码来解决我的问题。

我在...遇到了路障

function drawChart() {
  var jsonData = $.ajax({
      url: "getData.php",
      dataType: "json",
      async: false
      }).responseText;

我不知道如何让我的公共 google 表格 URL 代替上面代码 sn-p 的“getData.php”部分工作。我对 php 一无所知，但看到了人们重新格式化他们的 google sheet URL 的例子，而不是使用 php 部分：

https://spreadsheets.google.com/feeds/list/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/1/public/basic?alt=json

但这仍然对我不起作用。当我已经有办法获取相同数据时，感觉就像我正在尝试使用这种方法获取数据（虽然没有自动刷新而无需手动重新加载整个网站）。任何帮助将不胜感激！

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_1" style="width: 700px; height: 400px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization1);
function drawVisualization1() {   
 var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
  query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
var options = {
      title : 'Sales ($) and Margin (%)',
      titleTextStyle: {
                      fontSize: 16,
                      },
      legend: {position: 'top', maxLines: 2},
      pointSize: 7,
      series: {
           0: {type: 'bars', targetAxisIndex: 0},
           1: {type: 'bars', targetAxisIndex: 0},
           2: {type: 'bars', targetAxisIndex: 0},
           3: {type: 'line', targetAxisIndex: 1},
      },
      vAxes:  {
              0: {title: 'Sales ($ in millions)'},
              1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}},
      hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
      isStacked: 'True',
  };
  var data = response.getDataTable();
  var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
  chart.draw(data, options);
}
</script>

Answer 1

您可以每隔几秒使用setRefreshInterval(seconds) 呼叫query.send()。

query.setRefreshInterval(120);
query.send(handleQueryResponse1);

Answer 2

您不需要 ajax，因为您使用 google.visualization.Query 来获取数据。

只需要以这种方式构建您的代码，
您可以刷新数据和图表，
无需重建一切。

请参阅以下工作 sn-p，
图表和选项创建一次。
最初检索数据，并在单击按钮时检索。
收到数据后，绘制图表。

我在图表中添加了'ready' 事件，只是为了证明数据已刷新并重新绘制图表。

但由于数据实际上并没有改变，所以似乎什么都没有发生。

google.charts.load('current', {
  packages: ['corechart']
}).then(drawVisualization1);

function drawVisualization1() {
  var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
  google.visualization.events.addListener(chart, 'ready', function () {
    console.log('drawn');
  });

  var options = {
    title : 'Sales ($) and Margin (%)',
    titleTextStyle: {
      fontSize: 16,
    },
    legend: {position: 'top', maxLines: 2},
    pointSize: 7,
    series: {
      0: {type: 'bars', targetAxisIndex: 0},
      1: {type: 'bars', targetAxisIndex: 0},
      2: {type: 'bars', targetAxisIndex: 0},
      3: {type: 'line', targetAxisIndex: 1},
    },
    vAxes:  {
      0: {title: 'Sales ($ in millions)'},
      1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}
    },
    hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
    isStacked: 'True',
  };

  getData();
  document.getElementById('refresh').addEventListener('click', getData);

  function getData() {
    var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
    query.send(handleQueryResponse1);
  }

  function handleQueryResponse1(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    var data = response.getDataTable();
    chart.draw(data, options);
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="refresh" type="button" value="Refresh" />
<div id="chart_1"></div>