logo标签列表

创建一个类似甘特图的并行条形图，用于并行线程时间可视化。

chartsvisualization
6

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

(start_timestamp, end_timestamp, task_name)

任务相互独立，因此我对甘特图式的“Y在X之后”可视化不感兴趣。

目前我的方法是通过修改水平堆叠条形图（第一个条形图是透明的，以产生晚于T等于0的任务效果）来实现。

我只是想知道是否已经有类似的可视化工具存在。

任何合理的编程语言都可以。

1个回答
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 
});
<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>

全面披露，我是ZingChart团队的成员。虽然还有其他的JS库可用，但如果您对该演示如何组合有任何疑问，我很乐意回答。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接