Google Chart API (не API визуализации): как избавиться от строк аннотаций

Question

Я пытаюсь создавать диаграммы с помощью Google Chart API и получать диаграммы в виде изображений. Обратите внимание, что я отображаю диаграмму на стороне сервера, а не на стороне браузера (ie без использования API визуализации Google).

В некоторых моих диаграммах я рисую вертикальную линию, представляющую цель. Так как цель одинакова для всех моих разных значений x, мне просто нужно пометить ее сверху графика, как показано на рисунке ниже:

Мне удается отобразить только верхнюю метку, НО: - Как я могу удалить небольшую строку аннотации? Особенно, когда ярлыки не отображаются! - Как я могу переместить этот ярлык вверху строки вместо правого (чтобы не перекрывать метки в виде полос, например, A = 95)? - Как мне отформатировать эту уникальную метку (ie установить текст в поле с цветом фона)

Вот код, который я использовал для генерации изображений диаграммы:

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');

Я видел трюк для удаления строки аннотаций при использовании API визуализации путем изменения сгенерированного SVG, но как действовать при использовании Chart 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())