Проблемы с Google Line Chart - аннотации и размещение легенды

Question

У меня возникла пара проблем с линейной диаграммой Google. Вот мой кодПока это единственная диаграмма на странице, и никакие дополнительные диаграммы или контейнеры диаграмм не скрываются.

<script type = "text/javascript">
 google.charts.load("45", { packages: ["corechart", "line"] });
 google.charts.setOnLoadCallback(drawChart);

function drawChart() {

 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Month');
 data.addColumn('number', 'GROWTH TARGET');
 data.addColumn({
  type: 'string',
  role: 'annotation'
 });
 data.addColumn({
  type: 'string',
  role: 'annotationText'
 });
 data.addColumn('number', 'CURRENT YR ACTUAL');
 data.addColumn({
  type: 'string',
  role: 'annotation'
 });
 data.addColumn({
  type: 'string',
  role: 'annotationText'
 });
 data.addColumn('number', 'PRIOR YR ACTUAL');
 data.addColumn({
  type: 'string',
  role: 'annotation'
 });
 data.addColumn({
  type: 'string',
  role: 'annotationText'
 });

 data.addRows([
  ["Apr", 57, "57", "57", 57, "57", "57", 52, "52", "52"],
  ["May", 78, "78", "78", 78, "78", "78", 64, "64", "64"],
  ["Jun", 112.6885246, "112.6885246", "112.6885246", 94, "94", "94", 87, "87", "87"],
  ["Jul", 112.6885246, "112.6885246", "112.6885246", 94, "94", "94", 87, "87", "87"],
  ["Aug", 123.2459016, "123.2459016", "123.2459016", 151, "151", "151", 94, "94", "94"],
  ["Sep", 139.8360656, "139.8360656", "139.8360656", 0, "0", "0", 105, "105", "105"],
  ["Oct", 191.1147541, "191.1147541", "191.1147541", 0, "0", "0", 139, "139", "139"],
  ["Nov", 236.3606557, "236.3606557", "236.3606557", 0, "0", "0", 169, "169", "169"],
  ["Dec", 262, "262", "262", 0, "0", "0", 186, "186", "186"],
 ]);

 console.log(data);

 var options = {
  chart: {
   title: "EBC GROWTH PLAN-CUMULATIVE UNITS",
   subtitle: 'UBVB 14-Oct-19'
  },
  curveType: 'function',
  width: '100%',
  height: 500,
  legend: {
   position: 'top',
   alignment: 'top',
   textStyle: {
    color: '#3f4647',
    fontSize: 11
   }
  },
  series: {
   0: {color: '#b5e38c'}, // Growth Target
   1: {color: '#ae3e12'}, // Prior Year Actual
   2: {color: '#2729ae'} // Current Year Actual
  },
 };

 var chart = new google.charts.Line(document.getElementById('ebcg_cumulative'));
 chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>

У меня проблемы:

1. Я ожидаюаннотации для каждой серии, но это не так. Я взял ссылку этого (хотя это довольно старый пост!) И этого . Я также не нахожу никакой разницы в структуре данных. Что может быть причиной. Я пытался использовать чарт версии 45 и текущий . Результат одинаков в обоих случаях.

2. Я не могу разместить легенду в верхней части диаграммы. Это либо слева, либо справа, либо диаграмма делает область диаграммы меньше.

Согласно https://developers.google.com/chart/interactive/docs/gallery/linechart, следующее должно (или не должно?) Размещать легенды наверхняя часть графика. Только none делает легенду невидимой. Все остальное размещает его слева или справа от графика.

{position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}

Пожалуйста, смотрите следующий скриншот:

Тем не менее, размер и цвет шрифта работают!

curveType не делает линии гладкими

Мне действительно нужно создать такую ​​диаграмму (извините, если это выходит за рамки моего первоначального вопроса). Какой тип диаграммы мне следует использовать для этого?

https://developers.google.com/chart/interactive/docs/gallery/combochart создает комбинированную диаграмму. Я могу изменить бары на линии и среднее значение на бары. Но мне нужен единственный бар. Средняя полоса приходит для каждой точки данных. Как я могу достичь вышеуказанного?