0

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

我无法让代码在 JSFiddle 中工作（我认为是因为带注释的时间线是基于 Flash 的？）但这里有一些基本代码，您可以将它们插入Google 的 Visualization Playground。你可以在这里看到一个保存的例子，但不幸的是不能修改代码，你必须去操场做那件事。

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都会导致图表闪烁。知道如何不闪烁也不重新缩放吗？

4

1 回答 1

0

从文档：

  • allowRedraw 必须为真
  • displayAnnotations 必须为 false（即不能显示注解）

那是你的问题。

于 2012-06-06T21:28:05.897 回答