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

我们在许多项目中的数据库中提供了可交付成果的列表，并带有数据点:

项目

函数

交货日期

我想找出以某种时间轴路线图 View 在网络上可视化可视化的最佳方法。有人可以建议这样做的任何好方法吗？一世

理想情况下，我希望能够单击一个项目，然后可以深入到每个项目描述等的详细信息页面中。

最佳答案

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

Google可视化API

首先，我将看一看Google Visualization API。特别是annotated timeline visualization。这实际上与Google finance website上使用的时间轴非常相似。使用此 View ，每个项目可以是整个 View 的一条水平线，并为每个项目标记了相关的里程碑。请注意，标记是交互式的。由于这都是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,
                           });
}

Google Charts API

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

有趣的是，以上的甘特图是使用URL通过Charts API动态生成的。尝试点击以下网址:

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

好吧，我认为那很酷。

FusionWidgets v3

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

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

关于asp.net-mvc - 在网络上以编程方式可视化路线图的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2141785/