时间戳

首页 > 解决方案 > 谷歌图表 API（不是可视化 API）：如何摆脱注释线

google-apps-script - 谷歌图表 API（不是可视化 API）：如何摆脱注释线

问题描述

我正在尝试使用 Google Chart API 生成图表并将图表作为图像。请注意，我在服务器端而不是在浏览器端呈现图表（即不使用 Google Visualization API）。

在我的一些图表中，我画了一条垂直线，代表一个目标。由于我所有不同的 x 值的目标都是相同的，因此我只需在图表顶部标记它，如下图所示：

图表示例

我可以设法只显示顶部标签，但是： - 如何删除小注释线？特别是当没有显示标签时！- 如何将此标签移动到行的顶部而不是右侧（以防止与条形标签重叠，例如 A = 95）？- 我如何格式化这个独特的标签（即在一个带有背景颜色的框中设置文本）

这是我用来生成图表图像的代码：

var annotations = [0, 
                   1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
                   2, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}, 
                   ];

var dataViewDefinition = Charts.newDataViewDefinition().setColumns(annotations).build();

var data = Charts.newDataTable()
  .addColumn(Charts.ColumnType.STRING, 'x')
  .addColumn(Charts.ColumnType.NUMBER, 'act')
  .addColumn(Charts.ColumnType.NUMBER, 'tgt')
  .addColumn(Charts.ColumnType.STRING, 'tgt_lbl')
  .addRow(['A', 90, 95, '95'])
  .addRow(['B', 80, 95, ''])
  .addRow(['C', 100, 95, ''])
  .build();


  var chart = Charts.newBarChart()
    .setDataTable(data)
    .setRange(0, 150)
    .setOption('series', {
      1: { lineWidth: 1, type: 'line'}
    })
    .setOption('chartArea', {'width': '80%', 'height': '100%'})
    .setColors(['#D9D9D9', '#0085AD'])
    .setOption('annotations', { textStyle: { color: '#000000' }})
    .setDataViewDefinition(dataViewDefinition)
    .build();


  var folder=DriveApp.getFolderById('Folder ID');
  folder.createFile(chart.getAs('image/png')).setName('Image Name');

在使用 Visualization API 时，我看到了一个通过修改生成的 SVG 来删除注释行的技巧，但是在使用 Chart API 时如何继续？

谢谢你的帮助！

标签： google-apps-scriptchartsgoogle-visualization

解决方案

您可以尝试以下选项... 

.setOption('annotations.stem.color', 'transparent')

或者... 

.setOption('annotations.stem.length', 0)

推荐阅读