在网络上以编程方式可视化路线图的最佳方式是什么？

Question

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

• 项目
• 功能
• 交货日期

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

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

Answer 1

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

alt text http://img24.imageshack.us/img24/1838/captureky.png

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

Answer 2

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

谷歌可视化 API

首先我会看看Google Visualization API。特别是annotated timeline visualization。这实际上与Google finance website 上使用的时间线非常相似。使用此视图，每个项目都可以是横跨视图的一条水平线，并为每个项目标记相关里程碑。请注意，标记是交互式的。由于这都是 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 生成甘特图。这有点复杂，因为它没有开箱即用的可视化。但是，使用水平条形图可以旋转您自己的。 This article 带您完成制作甘特图所需的步骤，如下所示：

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

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

嗯，我觉得这很酷。

FusionWidgets v3

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

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

Answer 3

这里有一些工具可以很好地完成此类任务：

闪光

• Flare
  • Something like this 可以工作。您可以在 x 轴上放置一个时间线。也许您可以按功能对项目进行纵向分组。
  • This could be a good visualization 如果您想显示每个项目消耗的工时数。
  • There is a timeline view in the demo

Javascript

• Protovis - 这个库类似于 Flare，但用于 Javascript
  • Look at this visualization
• ProcessingJS - 该库具有作为通用可视化库的潜力。

Answer 4

你试过Daypilot控制吗？有免费版，你可以试试。