为并行线程时序可视化创建类似甘特的并行条形图

Question

为并行线程时序可视化创建类似甘特的并行条形图

我需要创建一个图表,类似于Chrome Inspector向您显示的可视化时间轴上所有与页面相关的请求的图表.输入数据是一个简单的元组:

(start_timestamp, end_timestamp, task_name)

Run Code Online (Sandbox Code Playgroud)

任务是独立的,所以我对Gantt之类的"Y-goes-after-X"可视化感兴趣.

我现在的方法是破解堆叠的水平条形图(堆栈中的第一个条形图是透明的,以使得从T开始的任务开始的效果等于0).

我只是想知道是否已经为这种可视化做了些什么.

任何理智的语言都会这样做.

Answer 1

Mer*_*ily 7

具有浮动条形图的JavaScript图表库应该能够执行您想要的灵活任务计时.有些人甚至有一个UTC选项,所以你可以将它用于你的时间戳数据,如果这是它的收集方式.

这是我使用ZingChart的JS图表库进行的基本演示,在几个月内完成了两项任务:

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({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

完全披露,我在ZingChart团队.其他JS库可用,但我很乐意回答有关如何将此演示放在一起的任何问题.

归档时间：	10 年，3 月前
查看次数：	467 次
最近记录：	9 年，10 月前