谷歌可视化注释时间线的替代品？（图形库）

发布于 2024-11-26 05:24:29 字数 715 浏览 6 评论 0原文

除了 Google 的带注释的时间轴可视化 API 之外，还有其他选择吗？

在此处输入图像说明

带注释的时间轴中存在一些错误，而且这些错误似乎不会得到解决。

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

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

支持多行
缩放；钻取和钻出日期范围
在时间上来回平移
支持数千个数据点
能够动态提供新数据

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月打碎记忆 2024-12-03 05:24:29

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

希望有帮助。

回复收藏 0 原文

故事和酒 2024-12-03 05:24:29

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

在此处输入图像说明

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

回复收藏 0 原文

望喜 2024-12-03 05:24:29

Google 于 2014 年 1 月 29 日发布了此类的新版本名为 Annotation 的图表图表。确实很酷！最重要的是，它可以免费供您随时随地使用。

注释图表是交互式时间序列折线图，支持
注释。与使用 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>

On January 29, 2014 Google has made available a new version of such a chart called Annotation Chart. It's pretty cool indeed! Best of all it's free to user wherever you want.

Annotation charts are interactive time series line charts that support
annotations. Unlike the annotated timeline, which uses Flash,
annotation charts are SVG/VML and should be preferred whenever
possible.

Sample:

<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>

回复收藏 0 原文