Erstellen einer grafischen Oberfläche zur Darstellung einer Reihe von Workback-Zeitplänen

Mein Team arbeitet an einer App in Java, die Projekte durch ein Geschäftsprozessmanagement-Tool schiebt. Jedes Projekt enthält etwa 25-30 Aufgaben, die in einer bestimmten Reihenfolge erledigt werden müssen.

Unter diesen Aufgaben befinden sich etwa sechs oder sieben, die „Workback-Datumsereignisse“ darstellen, die jeweils bis zu vordefinierten aufeinanderfolgenden Fristen abgeschlossen werden müssen

In unserer Datenbank haben wir also etwa 7 Aufgaben, die mit jedem Projekt verknüpft sind, jede mit einer Frist und einer Flagge, die uns sagt, welche der Veranstaltungen abgeschlossen wurden.

Was das Unternehmen interessiert, ist eine grafische Oberfläche, die einem Benutzer zeigt:

  • eine Liste der Projekte, an denen der Benutzer beteiligt ist
  • Jedes Listenelement zeigt an, wo sich das Projekt im Work-Back-Zeitplan befindet
  • Farbcodierung, um anzuzeigen, welche Projekte hinter oder fast hinter dem Zeitplan zurückliegen
  • idealerweise eine Möglichkeit, die Fristen mit der Benutzeroberfläche zu verschieben, aber wir nennen dies eine schöne Sache

Bisher habe ich mich mit einigen Javascript-Diagrammbibliotheken wie chart.js befasst, obwohl es nicht so aussieht, als ob die Schnittstelle genau das bietet, was wir wollen, da viele dieser Bibliotheken rein mathematisch zu sein scheinen.

Ich habe das Gefühl, dass wir dies mit einem unästhetischen Tisch leicht genug erreichen könnten, aber wir würden gerne ein ziemlich gutes Aussehen aus dem End-Feature herausholen.

Sie suchen also nach einem Ersteller von Gantt-Diagrammen? en.wikipedia.org/wiki/Gantt_chart ?

Antworten (1)

Ich würde vorschlagen, die Google Charts-API zu verwenden, um ein Zeitachsendiagramm zu erstellen - zB:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('example2.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

  chart.draw(dataTable);
}
</script>

<div id="example2.1" style="height: 200px;"></div>

Erstellt:Geben Sie hier die Bildbeschreibung ein