5

我们的数据库中有一个包含多个项目的可交付成果列表，其中包含以下数据点：

  • 项目
  • 功能
  • 邮寄日期

我想找出在某种时间线路线图视图中在网络上可视化的最佳方式。任何人都可以提出任何好的方法吗？一世

理想情况下，我希望能够单击项目，然后可以深入了解我们在每个项目描述等之前拥有的详细信息页面。

4

4 回答 4

17

使用时间线网络小部件。它是免费和开源的。

替代文字 http://img24.imageshack.us/img24/1838/captureky.png

编辑：如果您还不确定是否要深入了解http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA ，您可以使用 Google Doc Spreedsheet 来使用控件

于 2010-01-26T19:07:29.757 回答
7

好吧，听起来您更多的是甘特图视图，尽管如果您只想标记里程碑应该完成的日期，那么时间表就可以了。

谷歌可视化 API

首先我会看一下Google Visualization API。特别是带注释的时间线可视化。这实际上与谷歌金融网站上使用的时间线非常相似。使用此视图，每个项目都可以是横跨视图的一条水平线，并为每个项目标记了相关的里程碑。请注意，标记是交互式的。由于这都是 Javascript，您还可以拥有跨可视化控件，因此单击时间轴上的某些内容可能会改变同一页面上的另一个可视化。

您实际上可以使用Google Code Playground尝试所有可用可视化的不同配置。这应该为您提供一种简单的方法来验证这个（或不同的）是否满足您的要求。

我对代码游乐场做了一些试验。如果你愿意，试试下面的代码。您可以将其复制/粘贴到 Playground 代码编辑器中。

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Project');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Project');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addRows(7);
  data.setValue(0, 0, new Date(2008, 1 ,1));
  data.setValue(0, 1, 1);
  data.setValue(0, 2, 'P1:MS1');
  data.setValue(0, 3, 'Project begins');
  data.setValue(1, 0, new Date(2008, 1 ,2));
  data.setValue(1, 1, 1);
  data.setValue(1, 4, 2);
  data.setValue(1, 5, 'P2:MS1');
  data.setValue(1, 6, 'Project begins');
  data.setValue(2, 0, new Date(2008, 1 ,3));
  data.setValue(2, 1, 1);
  data.setValue(2, 4, 2);
  data.setValue(3, 0, new Date(2008, 1 ,4));
  data.setValue(3, 1, 1);
  data.setValue(3, 4, 2);
  data.setValue(3, 5, 'P2:MS2');
  data.setValue(3, 6, 'Completed development');
  data.setValue(4, 0, new Date(2008, 1 ,5));
  data.setValue(4, 1, 1);
  data.setValue(4, 2, 'P1:MS2');
  data.setValue(4, 3, 'Completed testing');
  data.setValue(4, 4, 2);
  data.setValue(5, 0, new Date(2008, 1 ,6));
  data.setValue(5, 1, 1);
  data.setValue(5, 4, 2);
  data.setValue(6, 0, new Date(2008, 1 ,7));
  data.setValue(6, 4, 2);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
    document.getElementById('visualization'));
    annotatedtimeline.draw(data, {
                            'displayAnnotations': true,
                            'displayExactValues': true,
                            'displayRangeSelector' : false,
                            'displayZoomButtons': false,
                            'legendPosition': 'newRow',
                            'max': 3,
                            'min': 0,
                            'scaleType': 'allfixed',
                            'thickness': 2,
                           });
}

谷歌图表 API

另一种选择是使用Google Charts API生成甘特图。这有点复杂，因为它没有开箱即用的可视化。但是，使用水平条形图可以旋转您自己的。本文将引导您完成制作如下所示的甘特图所需的步骤：

使用 Google Charts API 的甘特图

这里有趣的一点是，上面的甘特图是通过图表 API 使用 URL 动态生成的。尝试点击以下网址：

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

嗯，我觉得那很酷。

FusionWidgets v3

作为最后的建议，您可以查看FusionWidgets，它有一些非常强大的可视化选项。他们所有的小部件都是基于 Flash 的。这是最后列出的，因为它不是开源的，也不是免费的。我没有亲自使用过，不像上面两个，但是例子看起来很棒。

我希望这些建议有所帮助。

于 2010-02-04T04:56:53.733 回答
2

以下是一些可能适用于此类任务的工具：

闪光

Javascript

于 2010-02-02T01:46:10.590 回答
1

您是否尝试过Daypilot控制？有免费版的，你可以试试。

于 2010-01-29T11:51:10.920 回答