Erstellen Sie ein Gantt-ähnliches, paralleles Balkendiagramm für die Visualisierung von parallelen Threading-Timing

Ich muss ein Diagramm erstellen, das dem von Chrome Inspector ähnelt, um alle seitenbezogenen Anforderungen auf einer Zeitachse zu visualisieren. Eingangsdaten ist ein einfaches Tupel:Erstellen Sie ein Gantt-ähnliches, paralleles Balkendiagramm für die Visualisierung von parallelen Threading-Timing

(start_timestamp, end_timestamp, task_name)

Aufgabe unabhängig sind, so bin ich nicht interessiert es Gantt-like "Y-goes-nach-X" Visualisierung.

Mein Ansatz wäre jetzt, ein gestapeltes horizontales Balkendiagramm zu hacken (der erste Balken in einem Stapel wäre transparent, um den Effekt von Aufgaben zu geben, die später beginnen als T gleich 0).

Ich frage mich nur, ob es schon etwas für diese Art von Visualisierung gemacht hat.

Jede vernünftige Sprache wird wirklich tun.

Quelle

2015-08-17 maligree

Eine JavaScript-Diagrammbibliothek mit schwebenden Balkendiagrammen sollte in der Lage sein, das zu tun, was Sie für ein flexibles Task-Timing benötigen. Einige haben sogar eine UTC-Option, so dass Sie diese für Ihre Zeitstempeldaten verwenden können, wenn sie so erfasst werden.

Hier ist eine grundlegende Demo ich mit ZingChart ‚s JS Grafik-Bibliothek gemacht, mit zwei Aufgaben über Monate:

var myConfig = { 
 
     "type":"hbar", 
 
     "title":{ 
 
      "text":"Timing Visualization" 
 
     }, 
 
     "plot":{ 
 
      
 
     }, 
 
     "scale-x":{ 
 
      "values":["task1","task2"] 
 
     }, 
 
     "scale-y":{ 
 
      "values":["Jan", 
 
      "Feb", 
 
      "Mar", 
 
      "Apr", 
 
      "May", 
 
      "Jun", 
 
      "Jul", 
 
      "Aug", 
 
      "Sept", 
 
      "Oct"], 
 
      "item":{ 
 
      "font-size":"6px" 
 
      } 
 
      }, 
 
     "series":[ 
 
      { 
 
       "values":[10,1], 
 
       "offset-values":[1,1], 
 
       "text":"Microsoft", 
 
       "background-color":"#2ABCF8" 
 
      }, 
 
      { 
 
       "values":[7,3], 
 
       "offset-values":[2,2], 
 
       "text":"Oracle", 
 
       "background-color":"#15A7E3" 
 
      }, 
 
      { 
 
       "values":[6,10], 
 
       "offset-values":[3,3], 
 
       "text":"Dell", 
 
       "background-color":"#0193CF" 
 
      } 
 
     ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});

<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= 'https://cdn.zingchart.com/2.1.2/zingchart.min.js'></script> 
 
\t \t <script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.2/modules/';</script> 
 
\t 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

vollständige Offenlegung, ich bin auf dem ZingChart Team. Andere JS-Bibliotheken sind verfügbar, aber ich würde gerne alle Fragen dazu beantworten, wie diese Demo zusammengestellt wurde.

Quelle

2015-08-19 19:12:37 Merrily

Erstellen Sie ein Gantt-ähnliches, paralleles Balkendiagramm für die Visualisierung von parallelen Threading-Timing

Antwort

Verwandte Themen