使用Highcharts庫顯示Google電子表格數據

Question

我有兩列（日期，距離）數據在谷歌spreadsheet。現在我想用餅圖顯示距離列，以便餅圖的不同片段顯示使用Highcharts庫的不同日期（星期日，...，星期六）所覆蓋的距離總和。

作爲Web開發一個小白，我有以下疑問：

1. 我需要只jQuery來繪製所需的數據？
2. 雖然我發現我需要在Highcharts庫中提供此電子表格的參考，但我不知道如何處理這些數據。我是否需要處理這兩個列並找出哪一天對應於一週中的哪一天，然後計算總和？如果是的話，我應該在哪裏寫這個邏輯？

如果你能給我一個虛擬的例子來繼續下去，那將是非常好的。

Answer 1

如果要顯示一週中每一天的聚合值，則比較容易實現。從Google電子表格中獲得的數據可以在complete函數中解析。我爲你準備了一個例子，其中pie表示每週每天的數據總和。

API參考：
http://api.highcharts.com/highcharts/data.googleSpreadsheetKey
http://api.highcharts.com/highcharts/data.complete

例子：
http://jsfiddle.net/yLgbyvwh/

Answer 2

這是我寫的一個函數，用於從兩列製作餅圖。也許你可以適應你的需求。他們的名單現在是'PieChart'。

function makePie(dataColName,labelColName) 
{ 
    var dataColName = (typeof(dataColName)!='undefined')?dataColName:'Data'; 
    var labelColName = (typeof(labelColName)!='undefined')?labelColName:'Labels'; 
    var ss=SpreadsheetApp.getActiveSpreadsheet(); 
    var sht=ss.getSheetByName('PieChart'); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    if(rngA[0].indexOf(dataColName)>-1 && rngA[0].indexOf(labelColName)>-1) 
    { 
    var datcol=rngA[0].indexOf(dataColName)+1; 
    var lblcol=rngA[0].indexOf(labelColName)+1; 
    var datrng=sht.getRange(2,datcol,rng.getHeight()); 
    var lblrng=sht.getRange(2,lblcol,rng.getHeight()); 
    var charts=sht.getCharts(); 
    if(charts) 
    { 
     for(var i=0;i<charts.length;i++) 
     { 
     if(charts[i].getOptions().get('title') == sht.getName()) 
     { 
      sht.removeChart(charts[i]); 
     } 
     } 
    } 
    var chart = sht.newChart() 
       .setChartType(Charts.ChartType.PIE) 
       .addRange(lblrng) 
       .addRange(datrng) 
       .setPosition(2, rng.getLastColumn()+1, 0, 0) 
       .setOption("pieHole",".3") 
       .setOption("is3D", "true") 
       .setOption('title',sht.getName()) 
       .build(); 
    sht.insertChart(chart); 
    } 
}