Question

我在Google spreadsheet中有两列（日期，距离）数据。现在我想使用饼图显示距离列，这样不同的饼图切片显示使用Highcharts库在一周的不同日期（星期日，星期六）覆盖的距离总和。

作为网络开发的菜鸟，我有以下疑问：

我是否只需要jQuery来绘制所需的数据？
虽然我发现我需要在Highcharts库中提供此电子表格的参考，但我不知道如何处理这些数据。我是否需要处理这两列并确定哪个日期对应于一周中的哪一天然后计算总和？如果是，我应该在哪里写这个逻辑？

如果你能给我一个虚拟的例子来继续下去，那将是很棒的。

Answer 1

这是我为从两列制作饼图而编写的函数。也许你可以根据自己的需要进行调整。他们现在的名字是'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);
   }
}

Answer 2

如果您想显示一周中每一天的汇总值，那么这很容易实现。从Google电子表格中获取的数据可以在complete函数中进行解析。我为你准备了一个例子，其中pie表示每周每天的数据总和。

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

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

使用Highcharts库显示Google电子表格数据

2 个答案: