Paralel iş parçacığı zamanlama görselleştirmesi için Gantt benzeri, paralel çubuk grafik oluşturma

Bir zaman çizelgesindeki tüm sayfala ilgili istekleri görselleştirmek için Chrome Denetçisinin size gösterdiği gibi bir grafik oluşturmanız gerekir. Giriş verileri basit bir başlık olur:Paralel iş parçacığı zamanlama görselleştirmesi için Gantt benzeri, paralel çubuk grafik oluşturma

(start_timestamp, end_timestamp, task_name)

Görev bağımsızdır, bu yüzden Gantt benzeri "Y-gider-sonrası X" görselleştirme ilgilenmiyorum. Şu anki yaklaşımım, yığılmış bir yatay çubuk grafiğini kesmek olacaktır (bir yığındaki ilk çubuk saydam olacak, daha sonra T eşit 0'dan başlayan görevlerin etkisini gösterecektir).

Sadece bu tür görselleştirmeler için yapılmış bir şey olup olmadığını merak ediyorum.

Gerçekten de herhangi bir akraba dili yapacak.

kaynak

2015-08-17 maligree

Esnek çubuk zaman çizelgelerine sahip bir grafik grafik kütüphanesi, esnek görev zamanlaması için istediğinizi yapabilmelidir. Bazıları UTC seçeneğine sahiptir, böylece zaman damgası verileriniz için bunu kullanabilirsiniz, eğer bu şekilde toplanıyorsa.

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>

Tam açıklama, ben ZingChart takımdayım:

İşte aylar boyunca iki görevlerle, ZingChart 'ın JS grafik kütüphanesi ile yapılan temel bir demo. Diğer JS lib'leri mevcut, ancak bu demonun nasıl bir araya getirildiği ile ilgili soruları yanıtlamaktan memnuniyet duyarız.

kaynak

2015-08-19 19:12:37 Merrily

Paralel iş parçacığı zamanlama görselleştirmesi için Gantt benzeri, paralel çubuk grafik oluşturma

cevap

İlgili konular