Google Visualization Annotated Timeline的替代方案? (图形库)

时间:2011-07-21 22:38:30

标签: charts data-visualization google-visualization annotatedtimeline

谷歌的Annotated Timeline可视化API还有其他选择吗?

enter image description here

There's some bugs in the Annotated Timeline,似乎没有解决这些问题。

此外,它还是基于 Flash 的图表。 Canvas + Javascript实现更加便携。


使带注释的时间轴有价值的品质(与我迄今为止发现的所有其他图表库相对)是:

  • 支持多行
  • 缩放;钻进和退出日期范围
  • 来回平移
  • 支持 数千 数据点
  • 能够动态提供新数据

据我所知,Google的Annotated Timeline是唯一的交互式折线图库。

9 个答案:

答案 0 :(得分:20)

Dygraphs应该完全符合您的要求,并且是完整的js实现。它是免费的,已经integrates with gvizsample here),所以你几乎不需要改变任何东西。它还有许多其他gviz图表中没有的有用功能(如滚动平均值计算)。

希望有所帮助。

答案 1 :(得分:5)

我知道这个问题已经很久了,但如果我知道有一个新的ChartRangeFilter api,它会省去很多时间。

enter image description here

https://google-developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter

答案 2 :(得分:3)

January 29, 2014上,Google提供了一个名为Annotation Chart的此类图表的新版本。确实非常酷!最重要的是,无论你想要什么,它都是免费的。

  

注释图表是支持的交互式时间序列折线图   注释。与使用Flash的带注释的时间轴不同,   注释图表是SVG / VML,无论何时都应该是首选   可能的。

样品:

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1.1', {'packages':['annotationchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true,
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 500px;'></div>
  </body>
</html>

答案 3 :(得分:2)

我刚碰到这个:

http://www.highcharts.com/demo/dynamic-master-detail

这不是免费的,但看起来很有趣。

答案 4 :(得分:2)

这个帖子有点老了,麻省理工学院的SIMILE小部件很棒。他们也有一个时间表。 SIMILE Timeline Widget

答案 5 :(得分:2)

院子里有一个新项目(是的,我是那里的开发商之一),这可能是您的最佳选择:

Data Visualization Software Lab

该库纯粹基于HTML5且非常具有交互性 - 尝试演示。它也是Mobile优化的,因此您可以在任何设备上使用它。

目前,图书馆处于测试阶段并处于积极发展阶段。很快就会有更多功能。强烈建议您提供任何反馈意见。还有大量文档和使用示例。外部控制的API也存在。

提供双重许可。

快照:

TimeChart example

答案 6 :(得分:1)

经过广泛研究以取代Google注释时间表后,我认为HighChart StockChart是最全面的。 如上所述,它不是开源的,也不是免费的,但根据我的说法可以负担得起。

答案 7 :(得分:1)

如果您不需要注释但只需要取景器功能,请尝试NVD3.js

答案 8 :(得分:0)

试试c3js 它完全自由,轻便且易于使用。