5

データベースには、データ ポイントを含む多数のプロジェクトにわたる成果物のリストがあります。

  • 計画
  • 関数
  • 配送日

これを Web 上で何らかのタイムライン ロードマップ ビューで視覚化する最善の方法を見つけたかったのです。誰かがこれを行う良い方法を提案できますか? 私

理想的には、アイテムをクリックして、各プロジェクトの説明などの詳細ページにドリルダウンできるようにしたいと考えています。

4

4 に答える 4

17

Use timeline web widget. It's free and open source.

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

Edit: you can play with the control with a Google Doc Spreedsheet if you are not sure to dive in yet http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA

于 2010-01-26T19:07:29.757 に答える
7

ガントチャートビューをもっと探しているように聞こえますが、マイルストーンを完了する必要がある日付をマークしたいだけの場合は、タイムラインが機能します。

Google Visualization API

まず、 GoogleVisualizationAPIを見てみましょう。具体的には、注釈付きのタイムラインの視覚化です。これは、実際にはGoogleFinanceWebサイトで使用されているタイムラインと非常によく似ています。このビューを使用すると、各プロジェクトはビューを横切る水平線になり、プロジェクトごとに関連するマイルストーンがマークされます。マーカーはインタラクティブであることに注意してください。これはすべて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

もう1つのオプションは、GoogleChartsAPIを使用してガントチャートを生成することです。これは、すぐに使用できる視覚化機能がないため、少し複雑です。ただし、横棒グラフを使用すると、独自の棒グラフを回転させることができます。この記事では、次のようなガントチャートを作成するために必要な手順を説明します。

GoogleChartsAPIを使用したガントチャート

ここで興味深い点は、上記のガントチャートが、URLを使用してchartsAPIを介して動的に生成されることです。以下のURLをクリックしてみてください。

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

まあ、それはかなりクールだと思います。

FusionWidgets v3

最後の提案として、いくつかの非常に強力な視覚化オプションを備えたFusionWidgetsを見ることができます。それらのウィジェットはすべてフラッシュベースです。これはオープンソースではなく、無料でもないため、最後にリストされています。上記の2つとは異なり、私は個人的には使用していませんが、例は見栄えがします。

これらの提案がお役に立てば幸いです。

于 2010-02-04T04:56:53.733 に答える
2

この種のタスクに適したツールを次に示します。

閃光

Javascript

于 2010-02-02T01:46:10.590 に答える
1

Daypilotコントロールを試してみましたか? 無料版がありますので、試してみてください。

于 2010-01-29T11:51:10.920 に答える