谷歌图表API, AnnotatedTimeline:正确设置几个系列和尺度



我使用的是Google Charts' AnnotatedTimeline,它包含三个不同的系列。

第一个系列有自己的尺度。第二个和第三个应该具有相同的比例,因为它们表示相同类型的数据。

问题是我一次只能得到与一个系列相关联的刻度。下面是我目前绘制的图表:

chart.draw(chartData, {scaleType: 'allmaximized', scaleColumns:[0, 1], displayExactValues: true, dateFormat: 'dd MMMM yyyy'});

这样,第一个级数在左边有自己的刻度,这很好。然而,第二个比例尺只使用第二个序列的值来计算,因此第三个序列在图表上是错位的。将方法更改为:

chart.draw(chartData, {scaleType: 'allmaximized', scaleColumns:[0, 1, 2], displayExactValues: true, dateFormat: 'dd MMMM yyyy'});

在图的中间添加了第三个级数的第三个刻度,这不是我想要的。

是否有办法将系列2和3分组以获得两者相同的比例?

我知道你现在想做什么了。你只需要两个轴,一个对应于0/1列中的值,另一个对应于2列。我把这个例子放在一起(随意复制粘贴到google playground):

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sold Pencils');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Sold Pens');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addColumn('number', 'Sold Erasers');
  data.addColumn('string', 'title3');
  data.addColumn('string', 'text3');
  data.addRows([
    [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null, 100, null, null],
    [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null, 120, null, null],
    [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null, 70, null, null],
    [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm', 100, null, null],
    [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null, 110, null, null],
    [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null, 130, 'Eraser Boom', 'People dig erasers']
  ]);
  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
      document.getElementById('visualization'));
  annotatedtimeline.draw(data, {'displayAnnotations': true, scaleType: 'allmaximized', scaleColumns:[0, 2]});
}

左边为0/1列,右边为2列。

系列2和系列3的比例相同吗?
看来唯一的办法就是"黑"它。可以通过在序列的末尾(或开头)添加两行伪值来实现。
得到变量max2, max3, min2, min3中序列2和3的最大值和最小值。然后添加两行(假)值:

  row1 = last value of series 1, Max(max2, max3), Max(max2, max3)
  row2 = last value of series 1, Min(min2, min3), Min(min2, min3)

你还需要设置选项scaleType:'allmaximized'和你的系列2和3将完美对齐。

最新更新