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

Question

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

• 项目
• 功能
• 邮寄日期

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

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

Answer 1

使用时间轴 Web小部件.它是免费和开源的.

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

编辑:如果您不确定潜水,可以使用带有Google Doc Spreedsheet的控件进行操作http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA

Answer 2

嗯,这听起来像是你更多的甘特图表视图,虽然如果你只想标记一个里程碑应该完成的日期,那么时间表将起作用.

Google Visualization API

首先,我将看一下Google Visualization API.特别是带注释的时间轴可视化.这实际上与Google财经网站上使用的时间表非常相似.使用此视图,每个项目可以是整个视图的水平线,并为每个项目标记相关的里程碑.请注意,标记是交互式的.由于这是所有Javascript,您还可以使用交叉viz控件,因此单击时间轴上的某些内容可能会改变同一页面上的另一个可视化.

实际上,您可以使用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生成甘特图.这有点复杂,因为它没有开箱即用的可视化.但是,使用水平条形图可以自己旋转.本文将指导您完成制作如下所示的甘特图所需的步骤:

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

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

嗯,我觉得这很酷.

FusionWidgets v3

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

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