Question

我有一个带注释的时间轴，我想实时更新（类似于Google Finance的做法）。但是，在添加数据时，我无法使图表不闪烁而不能重新缩放。

我无法让代码在JSFiddle中工作（我认为因为带注释的时间轴是基于Flash的吗？）但是这里有一些基本的代码可以插入Google's Visualization Playground。你可以看到一个saved example here，但遗憾的是无法修改代码，你必须去游乐场才能做到这一点。

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'My Data');

  data.addRows([
    [new Date(2009, 1 ,1), 30000],
    [new Date(2009, 1 ,2), 14045],
    [new Date(2009, 1 ,3), 55022],
    [new Date(2009, 1 ,4), 75284],
    [new Date(2009, 1 ,5), 41476],
    [new Date(2009, 1 ,6), 33322]
  ]);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
      document.getElementById('visualization'));

  var options = {
     'allowRedraw' : true ,
     'displayAnnotations' : true,
     'zoomStartTime': new Date(2009, 1 ,2), 
     'zoomEndTime': new Date(2009, 1 ,10)
  };
  annotatedtimeline.draw(data, options);

  // let's add some more data in 3 seconds
  setTimeout(function() {
      again(annotatedtimeline, data, options);
  }, 3000);
}


function again(timeline, data, options) {
    data.addRow([new Date(2009, 1 ,7), 30000]);
    timeline.draw(data, options);
}

google.setOnLoadCallback(drawVisualization);

奇怪的是，根据我如何设置displayAnnotations，我得到了截然不同的闪烁行为

displayAnnotations = true：图表闪烁，但不会重新缩放 displayAnnotations = false：没有图表闪烁，但它会重新缩放到新数据（在操场上试试看）

设置allowRedraw = false会导致图表闪烁，无论如何。知道怎么没有闪烁，没有重新缩放？

Answer 1

来自文档：

allowRedraw必须为true

displayAnnotations必须为false（即，您无法显示注释）

那是你的问题。

带注释的时间线闪烁和重新缩放

1 个答案: