Creazione di un grafico a barre parallelo simile a Gantt per la visualizzazione della sincronizzazione del filo parallelo

Ho bisogno di creare un grafico che sia un po 'come quello che Chrome Inspector mostra per visualizzare tutte le richieste relative alla pagina su una timeline. I dati di ingresso è una semplice tupla:Creazione di un grafico a barre parallelo simile a Gantt per la visualizzazione della sincronizzazione del filo parallelo

(start_timestamp, end_timestamp, task_name)

Task sono indipendenti, quindi non mi interessa che Gantt-like "Y-va-dopo-X" visualizzazione.

Il mio approccio in questo momento sarebbe quello di hackerare un grafico a barre orizzontale impilato (la prima barra di una pila sarebbe trasparente, per dare l'effetto di attività che iniziano più tardi di T uguale a 0).

Mi chiedo se c'è già qualcosa per questo tipo di visualizzazione.

Qualsiasi linguaggio sano farà, davvero.

fonte

2015-08-17 maligree

Una libreria di creazione di grafici JavaScript con grafici a barre mobili dovrebbe essere in grado di eseguire ciò che si desidera per un tempismo di attività flessibile. Alcuni hanno anche un'opzione UTC, quindi puoi utilizzarla per i tuoi dati con timestamp, se è così che viene raccolta.

Ecco una demo di base che ho fatto con la biblioteca grafico ZingChart s' JS, con due compiti in tutta mesi:

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>

divulgazione completa, io sono sulla squadra ZingChart. Sono disponibili altre librerie JS, ma sarei felice di rispondere a qualsiasi domanda su come è stata realizzata questa demo.

fonte

2015-08-19 19:12:37 Merrily

Creazione di un grafico a barre parallelo simile a Gantt per la visualizzazione della sincronizzazione del filo parallelo

risposta

Problemi correlati