使用 Google App 脚本自定义 Google 条形图

Question

我目前在使用 Google 应用脚本配置简单图表时遇到了一些问题。我似乎无法找到正确的文档以取得进一步进展！

我已经从几个电子表格中提取数据，所以这方面很好！

我发现有多种方法可以自定义图表的外观，并且有一些可用的工具，例如：

http://imagecharteditor.appspot.com/

http://code.google.com/apis/ajax/playground/?type=visualization

我希望像这个例子一样为我的条形图添加颜色

http://code.google.com/apis/ajax/playground/?type=visualization#image_multicolor_bar_chart

此外，在第一个链接中，还有使用范围标记工具创建部分的选项。我希望通过这些工具，我可以将代码复制到我的 App Script Chart 中使用。

我可以看到这个工作的唯一方法是使用 .setOption(string, object)

我试过这个...

    var data = Charts.newDataTable()
        .addColumn(Charts.ColumnType.STRING, 'Month')      
        .addColumn(Charts.ColumnType.NUMBER, 'Mark Achieved')  
    for(var x=0; x < ChartData.length;x++){
        data.addRow(ChartData[x]);        
    }     
    data.build();

  var chart = Charts.newColumnChart()
      .setDataTable(data)     
      .setDimensions(1000, 600)      
      .setRange(0, 100)
      .setTitle('Test Scores')
      .setLegendPosition(Charts.Position.BOTTOM)  
      .setOption('options',{cht: 'bvs', chco: 'A2C180,3D7930', max: 100})      
      .build();          
  app.add(chart);

任何帮助将不胜感激！

编辑

Answer 1

您尝试使用的选项适用于静态图像图表（现已弃用），不适用于 ColumnCharts。 ColumnCharts 按系列而不是数据点对条形图进行着色，因此如果您想要多色条形图，则必须将它们分成不同的数据系列。我写了一个 hack 来做到这一点（参见 jsfiddle 了解标准的 javascript 版本）。我对可视化 API 的 AppsScript 实现的阅读似乎排除了在 DataViews 中使用计算列的可能性，但这里的文档可能不完整。尝试创建这样的视图：

// add one calculated column for each month
var dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, {
    type: Charts.ColumnType.NUMBER,
    label: 'Mark Achieved',
    calc: function (dt, row) {
        if (dt.getValue(row, 0) == 'January') ? dt.getValue(row, 1) : null;
    }
}, {
    type: Charts.ColumnType.NUMBER,
    label: 'Mark Achieved',
    calc: function (dt, row) {
        if (dt.getValue(row, 0) == 'February') ? dt.getValue(row, 1) : null;
    }
}/*...*/]);

这很可能需要调整，并且可能根本不起作用，在这种情况下，您将不得不更改电子表格的查询或重新排列电子表格的结构。

至于将范围添加到图表中，您能否详细说明您希望它们看起来像什么？