1

我在使用 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和current。两种情况下的结果都是一样的。

  2. 我无法将图例放在图表顶部。它位于左侧或右侧，或者是使图表区域变小的图表。

根据https://developers.google.com/chart/interactive/docs/gallery/linechart，以下应该（或不应该？）将图例放在图表顶部。只是none让传说无形。其他任何东西都将其放置在图表的左侧或右侧。

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

请看下面的截图：

在此处输入图像描述

但是，字体大小和颜色都可以工作！

  1. curveType没有使线条流畅

我实际上需要创建这样的图表（对不起，如果这超出了我原来的问题的范围）。我应该为此使用什么图表类型？

在此处输入图像描述

https://developers.google.com/chart/interactive/docs/gallery/combochart创建一个组合图表。我可以将条形更改为线条，将平均值更改为条形。但我需要单杠。每个数据点都有平均条。我怎样才能实现上述目标？

4

0 回答 0