使用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); 
    } 
}