Question

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

项目
功能
交货日期

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

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

Answer 1

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

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

修改：如果您还不确定潜入http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA

，可以使用Google Doc Spreedsheet玩控件

Answer 2

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

Google Visualization API

首先，我要看一下Google Visualization API。特别是annotated timeline visualization。这实际上与Google finance website上使用的时间轴非常相似。使用此视图，每个项目可以是整个视图的水平线，并为每个项目标记相关的里程碑。请注意，标记是交互式的。由于这是所有Javascript，您还可以使用交叉控件，因此单击时间轴上的某些内容可能会改变同一页面上的另一个可视化。例如。

您可以使用Google Code 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,
                           });
}

Google Charts API

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

Gantt chart using 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，它有一些非常强大的可视化选项。他们所有的小部件都是基于闪存的。这是最后列出的，因为它不是开源而不是免费的。我没有亲自使用它，不像上面两个，但这些例子看起来很棒。

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

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控件？有一个免费版本，你可以试试。

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

4 个答案: