Tworzenie równoległego wykresu słupkowego podobnego do Gantta do wizualizacji równoległego wątku czasowego

Potrzebuję utworzyć wykres podobny do tego, co Inspektor Chrome pokazuje, jak wizualizować wszystkie żądania dotyczące strony na osi czasu. Dane wejściowe to prosta krotka:Tworzenie równoległego wykresu słupkowego podobnego do Gantta do wizualizacji równoległego wątku czasowego

(start_timestamp, end_timestamp, task_name)

Task są niezależne, więc nie jestem zainteresowany to Gantta-like „Y-idzie-po-X” wizualizacja.

Moje podejście polega na zhakowaniu ułożonego poziomo wykresu słupkowego (pierwszy słupek w stosie byłby przezroczysty, aby efekt zadań zaczynających się później niż T był równy 0).

Zastanawiam się, czy jest coś już stworzonego do tego rodzaju wizualizacji.

Każdy rozsądny język naprawdę.

Źródło

2015-08-17 maligree

Biblioteka wykresów JavaScript z pływającymi wykresami słupkowymi powinna być w stanie wykonać to, co chcesz, aby zapewnić elastyczne czasy zadań. Niektóre mają nawet opcję UTC, więc możesz użyć jej do danych z datownika, jeśli tak się je gromadzi.

Oto podstawowe demo zrobiłem z JS wykresu bibliotece ZingChart „s, z dwoma zadaniami całej miesiącach:

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>

Pełne ujawnienie, jestem w zespole ZingChart. Dostępne są inne biblioteki JS, ale z chęcią odpowiem na wszelkie pytania dotyczące tworzenia tego demo.

Źródło

2015-08-19 19:12:37 Merrily

Tworzenie równoległego wykresu słupkowego podobnego do Gantta do wizualizacji równoległego wątku czasowego

Odpowiedz

Powiązane problemy