【问题标题】:Alternative to Google Visualization's Annotated Timeline? (graphing library)替代谷歌可视化的注释时间线? (图形库)
【发布时间】:2011-10-10 15:37:28
【问题描述】:

Google 的Annotated Timeline Visualization API 有什么替代品吗?

There's some bugs in the Annotated Timeline,看来他们不会被解决。

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


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

  • 支持多行
  • 缩放;钻入和跳出日期范围
  • 随着时间的推移来回平移
  • 支持 数千 个数据点
  • 能够即时提供新数据

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

【问题讨论】:

标签: charts data-visualization google-visualization annotatedtimeline


【解决方案1】:

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

【讨论】:

    【解决方案2】:

    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>
    

    【讨论】:

    • 感谢您回来添加此答案,我一直希望发布此替代方案!
    • 与我一直使用的其他 Google Charts 相比,这个似乎是一大堆问题......
    【解决方案3】:

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

    【讨论】:

      【解决方案4】:

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

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

      【讨论】:

      • 我将一个应用程序从 google AnnotatedTimeLine 迁移到 ChartRangeFilter 并且很满意。
      • 只是我的问题,还是图表范围控件在移动设备上无法操作?
      【解决方案5】:

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

      Data Visualization Software Lab

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

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

      提供双重许可。

      快照:

      【讨论】:

        【解决方案6】:

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

        【讨论】:

          【解决方案7】:

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

          【讨论】:

            【解决方案8】:

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

            希望对您有所帮助。

            【讨论】:

            • 值得一提的是,dygraphs 还有一个范围选择器,就像谷歌注释时间轴底部的那个一样。它默认情况下不启用,但可以轻松启用。有关示例,请参见 dygraphs.com/tests/range-selector.html
            • 这似乎在移动设备上工作得很奇怪......虽然捏缩放很好,但很容易意外缩放或滚动到没有东西的边界,然后尝试找出乐趣了解如何回到有用的地方。
            【解决方案9】:

            我刚刚遇到这个:

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

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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2023-04-09
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2014-03-13
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多