Google 图表 API（不是可视化 API）：如何去掉注释线

Question

我正在尝试使用 Google 图表 API 生成图表并将图表作为图像获取。请注意，我在服务器端而不是浏览器端呈现图表（即不使用 Google 可视化 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');

我看到 trick 在使用可视化 API 时通过修改生成的 SVG 来删除注释行，但是在使用图表 API 时如何继续？

谢谢你的帮助！

Answer 1

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

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

或者……

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

Answer 2

对于像上面这样的输出，我尝试了不同的方法：

仔细想想，95目标不是一个数据系列，它是你所有系列共有的静态值。所以另一种方法是在代表目标的水平轴上设置一条垂直线（刻度）。

一个例子：

function createDataView(){
  // Build a DataTable with data
  var data = Charts.newDataTable();
  data.addColumn(Charts.ColumnType.STRING, 'Domain / Series');
  data.addColumn(Charts.ColumnType.NUMBER, 'Sales');
  data.addRow(['A', 90]);
  data.addRow(['B', 80]);
  data.addRow(['C', 100]);
  data.build();
  return data
}

function chartDataTable(dataTable) {
  
  // Create a ChartBuilder with the data 
  var chartBuilder = Charts.newBarChart().setDataTable(dataTable);
  chartBuilder.setOption('title','My chart');
  chartBuilder.setOption('titleTextStyle',{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 16,
                                        'bold': true,
                                        'italic': false 
                                      });
  chartBuilder.setOption('hAxes', {0:{'title':'Sales in USD',
                                      'titleTextStyle':{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 14,
                                        'bold': true,
                                        'italic': false 
                                      },
                                      'ticks':[{
                                        'v':95, 
                                        'f':'Target 95$'
                                      }],
                                      'gridlines':{
                                        'color':'black',
                                        'count': 5
                                      },
                                      'minorGridlines':{
                                        'color':'grey',
                                        'count': 0
                                      },
                                      'textPosition':'out',
                                      'textStyle':{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 12,
                                        'color':'magenta',
                                        'bold': true,
                                        'italic': true 
                                      }
                                     },
                                   1:{}
                                  }
                        );
  chartBuilder.setOption('vAxes', {0:{'title':'Accounts',
                                      'titleTextStyle':{ 
                                        'fontName': 'AudioWide',
                                        'fontSize': 14,
                                        'bold': true,
                                        'italic': false 
                                      },
                                      'textPosition':'out'
                                     }
                                  }
                        );
  
  // Asign data series to axis
  chartBuilder.setOption('series', {
    0:{'targetAxisIndex':0},
    1:{'targetAxisIndex':0, 
       'visibleInLegend':false       
      }
  });
  
  // Asign a range for the chart
  chartBuilder.setRange(50,150);
  
  
  // Create the dataView we will use
  var dataView = Charts.newDataViewDefinition();
  
  // Create column Indexes for the Data view
  // indexes start at 0
  var calculated_col_obj = {
    calc: 'stringify',
    type: 'string',
    label: '',
    id: '',
    sourceColumn: 1,
    role: 'annotation',
  };
  
  var columnIndexes = [0,1,calculated_col_obj]; 
  
  // Build the data view with the column indexes we require
  dataView.setColumns(columnIndexes).build();
  
  // set the dataview for this chart
  chartBuilder.setDataViewDefinition(dataView)
  
  //  Build the chart
  var chart = chartBuilder.build();
  
  // save chart in Drive folder
  var folder=DriveApp.getFolderById('<YOUR-FOLDER-ID>');
  folder.createFile(chart.getAs('image/png')).setName('MyChartFromDataView');
}

最后：

chartDataTable(createDataView())

Google 图表 API（不是可视化 API）：如何去掉注释线

Google Chart API (not Visualization API): How to get rid of annotation lines

charts

google-visualization

google-apps-script

对于像上面这样的输出，我尝试了不同的方法：

一个例子：

最后：