EmbeddedChartBuilder.setOption（）函数的许多图表选项对Google Apps脚本不可用

Question

我创建了一个简单的脚本，可以使用Sheet#newChart

在工作表上创建图表

function buildVitalsChart(){
  var ss = SpreadsheetApp.getActive();
  var sh = ss.getSheetByName('Vitals Chart');
  var rg = sh.getRange('A1:E');
  var allChts = sh.getCharts();
  var idA = [];
  for(var i = 0; i < allChts.length; i++){
    sh.removeChart(allChts[i]);
  }
  SpreadsheetApp.flush();
  var cht = sh.newChart()
    .asLineChart()
    .addRange(rg)
    .setPosition(2, 6, 0, 0)
    .setOption('title', 'Vitals')
    .build()
  sh.insertChart(cht);
}

图表如下：

但是，这并不是我想要的，但是我不知道要设置什么图表选项才能得到我想要的。我使用以下代码查看图表的当前选项：

function getVitalsChartOptions() {
  var ss = SpreadsheetApp.getActive();
  var sh = ss.getSheetByName('Vitals Chart');
  var rg = sh.getDataRange();
  var vA = rg.getValues();
  var data = '<br />Data:<br />';
  for (var i = 0; i < vA.length; i++) {
    if (i > 0) { data += '<br />'; }
    for (var j = 0; j < vA[i].length; j++) {
      if (j > 0) { data+=', '; }
      data += vA[i][j];
    }
  }
  data += '<br />';
  var opsh = ss.getSheetByName('Options');
  var oprg = opsh.getDataRange();
  var opA = oprg.getValues();
  var cht = sh.getCharts()[0];
  var s = 'Chart Options<br />';
  var optsChecked = '<br />Options Checked but null<br />';
  s += Utilities.formatString('Chart Id=%s<br />Chart Title=%s<br />', cht.getId(), cht.getOptions().get('title'));
  for (var i = 0; i < opA.length; i++) {
    var id = cht.getId();
    var title = cht.getOptions().get('title');
    var opt = opA[i][0].toString();
    try {
      if (cht.getOptions().get(opt) != null) {
        s += Utilities.formatString('%s - Chart Option \'%s\'=<strong>%s</strong><br />', i+1, opA[i][0], cht.getOptions().get(opt));
      } else {
        optsChecked += Utilities.formatString('%s - %s<br />', i+1, opt)
      }
    } catch(e) {
      s += Utilities.formatString('%s option=%s - Error: %s<br />', i+1, opt, e);
      continue;
    }
  }
  s += '<input type="button" value="Exit" onClick="google.script.host.close();" />';
  optsChecked += '<input type="button" value="Exit" onClick="google.script.host.close();" />';
  data += '<input type="button" value="Exit" onClick="google.script.host.close();" />';
  var ui = HtmlService.createHtmlOutput(s + optsChecked + data).setWidth(800).setHeight(500);
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Chart Options');
} 

这是该代码的输出：

Chart Options
Chart Id=u2083708198027
Chart Title=Vitals
2 - Chart Option 'animation.duration'=500
31 - Chart Option 'curveType'=
78 - Chart Option 'height'=371
86 - Chart Option 'lineWidth'=2
95 - Chart Option 'title'=Vitals
141 - Chart Option 'width'=600

Options Checked but null
1 - aggregationTarget
3 - animation.startup
4 - animation.easing
5 - annotations.boxStyle
6 - annotations.datum
7 - annotations.domain
8 - annotations.highContrast
9 - annotations.stem
10 - annotations.style
11 - annotations.textStyle
12 - axisTitlesPosition
13 - backgroundColor
14 - backgroundColor.stroke
15 - backgroundColor.strokeWidth
16 - backgroundColor.fill
17 - chartArea
18 - chartArea.backgroundColor
19 - chartArea.left
20 - chartArea.top
21 - chartArea.width
22 - chartArea.height
23 - colors
24 - crosshair
25 - crosshair.color
26 - crosshair.focused
27 - crosshair.opacity
28 - crosshair.orientation
29 - crosshair.selected
30 - crosshair.trigger
32 - dataOpacity
33 - enableInteractivity
34 - explorer
35 - explorer.actions
36 - explorer.axis
37 - explorer.keepInBounds
38 - explorer.maxZoomIn
39 - explorer.maxZoomOut
40 - explorer.zoomDelta
41 - focusTarget
42 - fontSize
43 - fontName
44 - forceIFrame
45 - hAxis
46 - hAxis.baseline
47 - hAxis.baselineColor
48 - hAxis.direction
49 - hAxis.format
50 - hAxis.gridlines
51 - hAxis.gridlines.color
52 - hAxis.gridlines.count
53 - hAxis.gridlines.units
54 - hAxis.minorGridlines
55 - hAxis.minorGridlines.color
56 - hAxis.minorGridlines.count
57 - hAxis.minorGridlines.units
58 - hAxis.logScale
59 - hAxis.scaleType
60 - hAxis.textPosition
61 - hAxis.textStyle
62 - hAxis.ticks
63 - hAxis.title
64 - hAxis.titleTextStyle
65 - hAxis.allowContainerBoundaryTextCufoff
66 - hAxis.slantedText
67 - hAxis.slantedTextAngle
68 - hAxis.maxAlternation
69 - hAxis.maxTextLines
70 - hAxis.minTextSpacing
71 - hAxis.showTextEvery
72 - hAxis.maxValue
73 - hAxis.minValue
74 - hAxis.viewWindowMode
75 - hAxis.viewWindow
76 - hAxis.viewWindow.max
77 - hAxis.viewWindow.min
79 - interpolateNulls
80 - legend
81 - legend.alignment
82 - legend.maxLines
83 - legend.position
84 - legend.textStyle
85 - lineDashStyle
87 - orientation
88 - pointShape
89 - pointSize
90 - pointsVisible
91 - reverseCategories
92 - selectionMode
93 - series
94 - theme
96 - titlePosition
97 - titleTextStyle
98 - tooltip
99 - tooltip.ignoreBounds
100 - tooltip.isHtml
101 - tooltip.showColorCode
102 - tooltip.textStyle
103 - tooltip.trigger
104 - trendlines
105 - trendlines.n.color
106 - trendlines.n.degree
107 - trendlines.n.labelInLegend
108 - trendlines.n.lineWidth
109 - trendlines.n.opacity
110 - trendlines.n.pointSize
111 - trendlines.n.pointsVisible
112 - trendlines.n.showR2
113 - trendlines.n.type
114 - trendlines.n.visibleInLegend
115 - vAxis
116 - vAxis.baseline
117 - vAxis.baselineColor
118 - vAxis.direction
119 - vAxis.format
120 - vAxis.gridlines
121 - vAxis.gridlines.color
122 - vAxis.gridlines.count
123 - vAxis.gridlines.units
124 - vAxis.minorGridlines
125 - vAxis.minorGridlines.color
126 - vAxis.minorGridlines.count
127 - vAxis.minorGridlines.units
128 - vAxis.logScale
129 - vAxis.scaleType
130 - vAxis.textPosition
131 - vAxis.textStyle
132 - vAxis.ticks
133 - vAxis.title
134 - vAxis.titleTextStyle
135 - vAxis.maxValue
136 - vAxis.minValue
137 - vAxis.viewWindowMode
138 - vAxis.viewWindow
139 - vAxis.viewWindow.max
140 - vAxis.viewWindow.min

Data:
Items, BPHI, BPLO, Pulse, Temperature
1, 127, 67, 46, 97.2
2, 106, 67, 46, 97.2
3, 113, 68, 49, 97.2
4, 110, 70, 51, 97.6
5, 110, 65, 46, 98
6, 115, 68, 48, 97.5
7, 110, 71, 48, 97
8, 111, 68, 51, 97.7
9, 109, 70, 53, 98.1
10, 118, 71, 51, 97.4
11, 116, 74, 51, 97.5
12, 114, 74, 54, 97.7
13, 104, 67, 50, 97.8
14, 108, 70, 51, 97.8
15, 114, 74, 59, 98
16, 109, 74, 57, 97.9
17, 106, 69, 53, 97.4
18, 122, 69, 50, 97.6
19, 110, 69, 55, 97.8
20, 104, 65, 53, 97.4
21, 109, 63, 47, 97.5
22, 110, 69, 46, 97.9
23, 102, 59, 48, 97.7
24, 103, 62, 50, 97.6
25, 106, 66, 51, 97.7
26, 109, 67, 52, 97.6
27, 114, 68, 52, 97.4
28, 112, 70, 59, 97.3
29, 112, 70, 60, 97.9
30, 98, 65, 53, 98.3
31, 104, 65, 53, 97.4

因此，我决定在图表上使用“编辑图表”功能。我想选中编辑工具底部的三个复选框：

现在图表如下所示：

这就是我想要的。

我再次使用上面的代码来查看选项并确定哪些选项已更改，以便我可以弄清楚如何使用Google Apps脚本。这是该输出的相关部分。

Chart Options
Chart Id=u2083711462871
Chart Title=Vitals
2 - Chart Option 'animation.duration'=500
31 - Chart Option 'curveType'=
45 option=hAxis - Error: InternalError: Access to class "(class)" is prohibited.
75 option=hAxis.viewWindow - Error: InternalError: Access to class "(class)" is prohibited.
78 - Chart Option 'height'=371
80 - Chart Option 'legend'=right
86 - Chart Option 'lineWidth'=2
93 option=series - Error: InternalError: Access to class "(class)" is prohibited.
95 - Chart Option 'title'=Vitals
141 - Chart Option 'width'=600

我得出的结论是，无法使用Google Apps脚本。

但是我希望也许还有其他我不知道的事情可以做到这一点。

所以问题是：

  

是否可以通过Google Apps脚本完成此操作？

Answer 1

不幸的是，正确的选项没有记载。通过反向工程，我能够找到这些选项。

尝试

 var cht = sh.newChart()
    .asLineChart()
    .addRange(rg)
    .setPosition(2, 6, 0, 0)
    .setNumHeaders(1) //Use row1 as headers Thank -WhiteHat
    .setOption("useFirstColumnAsDomain", true) //ColAasLabels
    .setOption("applyAggregateData",0) //AggregateColA
    .build();

此外，从图表编辑器创建的图表选项与从apps-script创建的图表的图表选项有很大不同。

Answer 2

使用javascript在网络应用中使用Google Visualization API

最后，我决定制作一个webapp，因为携带手机比携带笔记本电脑容易得多。另外，我的手机允许我通过说话而不是打字来输入数据。我发现使用Javascript可以轻松完成这些图表。这是我用来创建生命力图表的代码。

JavaScript：

function drawChart(){
$('#btnA').css('background-color','#ffff00');
google.script.run
.withSuccessHandler(function(vObj){
console.log(vObj);
var dt=vObj.dA;
var hA=dt[0];
dt.splice(0,1);
var dA=dt.slice();
var data = new google.visualization.DataTable();
for(var i=0;i<hA.length;i++){
  if(i===0){
    data.addColumn('string',hA[i]);
  }else{
    data.addColumn('number',hA[i]);
  }
}
data.addRows(dA);
var options={
  title:'My Vitals  (Starts: ' + vObj.start + '  -  Ends: ' + vObj.end + ')',
  fontSize: 14,
  fontName: 'Roman',
  width:640,
  height:350,
  pointSize:3,
  hAxis:{slantedText:true,slantedTextAngle:90,textStyle:{color:'#333300',fontName:'Verdana',fontSize:8,bold:true}},
  legend:{position:'top'},
  chartArea:{left:75,top:75,width:'75%',height:'50%'},
  series:{0: {targetAxisIndex: 0}, 1:{targetAxisIndex: 0}, 2:{targetAxisIndex: 0}, 3:{targetAxisIndex: 1}},
  vAxes:[{title:'BP/PULSE',titleTextStyle:{color:'#0000CC',fontName:'Verdana',fontSize:12,bold:true,italic:false},textStyle:{color:'#0000CC',fontName:'Verdana',fontSize:10,bold:true,italic:false}},{title:'TEMP',titleTextStyle:{color:'#007700',fontName:'Verdana',fontSize:12,bold:true,italic:false},textStyle:{color:'#007700',fontName:'Verdana',fontSize:10,bold:true,italic:false}}]
};
var chart=new google.visualization.LineChart(document.getElementById('vcht'));
google.visualization.events.addListener(chart,'click',function(){emailVitalsDialog()});
google.visualization.events.addListener(chart,'ready',function(){
  gImgObj['base64Data']=chart.getImageURI().split(',')[1];
  gImgObj.ready=true;
});
chart.draw(data,options);
$('#btnA').css('background-color','#ffffff');
})
.getVitalsData();
}

Google Apps脚本：

function getVitalsData(){
  var ss=SpreadsheetApp.openById(getGlobal('gSSID'));
  var sh=ss.getSheetByName('Notes');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var vObj={dA:[]};
  var tA=[];
  var dA=[['DATE','BPHI','BPLO','PULSE','TEMP']];
  for(var i=0;i<vA.length;i++){
    if(vA[i][1]=='Vitals'){
      var itemDate=Utilities.formatDate(new Date(vA[i][0]), Session.getScriptTimeZone(), "E");
      var itemData=String(vA[i][2]).trim().split('/');
      itemData.splice(0,0,itemDate);
      var row=itemData.slice();
      dA.push([row[0],Number(row[1]),Number(row[2]),Number(row[3]),Number(row[4])]);
      tA.push(Utilities.formatDate(new Date(vA[i][0]), Session.getScriptTimeZone(), "E MMM dd, yyyy"));
    }
  }
  vObj.dA=dA;
  vObj['start']=tA[0];
  vObj['end']=tA[tA.length-1];
  Logger.log(vObj);
  return vObj;
}

这是图表的样子：