用谷歌電子表格中的數據填充谷歌圖表

Question

這似乎是一件非常簡單的事情，但我已經搜索並沒有找到解決方案。 我正在嘗試根據谷歌電子表格中的數據在我的網站上創建一個圖表。 我已經能夠使用硬編碼值使其工作，但不確定如何從電子表格中填寫。

我當前的腳本如下所示：

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Answer 1

這里有一個帶有示例的教程：

https://developers.google.com/chart/interactive/docs/spreadsheets

基本上，您的代碼將如下所示：（我不確定您的 URL 是否正確。另外，設置 url 的末尾以使用正確的數據范圍）：

    google.load("visualization", "1", {packages:["corechart"]});

function initialize() {
        var opts = {sendMethod: 'auto'};
        // Replace the data source URL on next line with your data source URL.
        var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AnD0SFr9ooPgdG83Wm&transpose=0&headers=1&merge=COLS&range=A1%3AA5%2CB1%3AC5&gid=0&pub=1', opts);         
        -
        // Optional request to return only column C and the sum of column B, grouped by C members.
        //query.setQuery('select C, sum(B) group by C');

        // Send the query with a callback function.
        query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

    var data = response.getDataTable();

  var options = {
    title: 'Company Performance'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
      
      google.setOnLoadCallback(initialize);

Answer 2

你也可以使用這種方式

/* Google sheet dynamic data */

function drowChartUsingSheet(){
    var sheetUrl = 'your google sheet link here';
    var opts = {sendMethod: 'auto'};
    var query = new google.visualization.Query(sheetUrl,opts);
    query.send(handleQueryResponse);
}


/* handler function & drow chart */
function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    var chart = new google.visualization.PieChart(document.getElementById('pie_googlechart'));
    chart.draw(data,options);
}