30

Google 的带注释的时间线可视化 API有什么替代品吗?

在此处输入图像描述

Annotated Timeline 中存在一些错误,并且似乎不会得到解决。

它也是一个基于Flash的图表。Canvas+Javascript 实现会更便携。


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

  • 支持多行
  • 缩放;钻入和跳出日期范围
  • 通过时间来回平移
  • 支持数千个数据点
  • 动态获取新数据的能力

据我所知,谷歌的注释时间线是唯一的交互式线图库。

4

9 回答 9

21

Dygraphs应该完全符合您的要求,并且是一个完整的 js 实现。它是免费的,并且已经与 gviz此处的示例)集成,因此您几乎不需要更改任何内容。它还有许多其他 gviz 图表上没有的其他有用功能(如滚动平均值计算)。

希望有帮助。

于 2011-07-25T00:29:29.007 回答
5

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

在此处输入图像描述

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

于 2013-08-29T12:19:11.650 回答
4

2014 年1 月 29 日, 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>
于 2014-02-21T01:01:48.307 回答
2

院子里有一个新项目(是的,我是那里的开发人员之一),它可能非常适合您的需求:

数据可视化软件实验室

该库完全基于 HTML5 并且非常具有交互性 - 尝试演示。它还针对移动设备进行了优化,因此您可以在任何设备上使用它。

库目前处于测试阶段并正在积极开发中。更多功能即将推出。强烈推荐任何反馈。还有大量的文档和使用示例。用于外部控制的 API 也存在。

提供双重许可。

快照:

时间图示例

于 2013-07-10T08:05:27.660 回答
2

这个线程有点老了,但是麻省理工学院的 SIMILE 小部件很棒。他们也有一个时间表。 SIMILE 时间线小部件

于 2011-09-08T13:29:40.367 回答
2

我刚遇到这个:

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

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

于 2011-07-22T23:18:09.783 回答
1

经过大量研究以取代 Google Annotated Timeline,我认为HighChart StockChart是最全面的。如上所述,它不是开源的,也不是免费的,但在我看来是负担得起的。

于 2012-01-18T15:42:23.617 回答
1

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

于 2013-09-19T02:42:37.143 回答
0

试试c3js。 它完全免费、轻巧且易于使用。

于 2014-09-03T12:54:12.997 回答