可视化事件的持续时间

Question

我想将事件的持续时间可视化为一个条，我的输入值是一个十进制值，其中整数部分代表天数，小数部分代表一天的一小部分。我可以将输入值转换为任何需要的值。一个事件可以跨越多天。下面的代码包含两个事件的数据，事件 a 的持续时间为 36 小时，事件 b 的持续时间为 12 小时。当然，一个事件可能会在几分钟后结束，或者需要 3 小时 14 分 24 秒。我希望 x 轴每 30 分钟有一次刻度，根据我需要 36 小时的样本数据，轴标签可以看起来像 0d 0:00.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {
        "event": "a",
        "durationdecimal": 1.5
      },
      {
          "event": "b",
        "durationdecimal": 0.5
      }
    ]
  },
  "mark": {"type": "bar"},
  "encoding": {
    "x": {
      "field": "durationdecimal",
      "type": "temporal",
      "axis": {"grid": false},
      "timeUnit": "utchoursminutes"
    },
    "y": {"field": "event", "type": "nominal", "title": null}
  ,
  "tooltip": [{"field": "durationdecimal"}]
  }
}

感谢任何帮助。

Answer 1

我认为您的 durationdecimal 不应该是 temporal，因为没有提供 date/month/year。我尝试使用 quantitative 类型重新创建您的示例，并使用 labelExpr 和一些 expressions 对标签进行了转换。它主要涵盖您提到的所有要求。剩下的部分似乎只有 30 分钟的滴答声。

以下为配置或参考editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "height": "container",
  "width": "container",
  "data": {
    "values": [
      {"event": "a", "durationdecimal": 1.5},
      {"event": "c", "durationdecimal": 2.1},
      {"event": "b", "durationdecimal": 0.5}
    ]
  },
  "mark": {"type": "bar"},
  "transform": [
    {
      "calculate": "split(toString(datum.durationdecimal),'.')[0] + 'd ' + (split(toString(datum.durationdecimal),'.')[1] ? floor(('0.'+split(toString(datum.durationdecimal),'.')[1])*24) + ':00': '0:00')",
      "as": "x_dateLabelTooltip"
    }
  ],
  "encoding": {
    "x": {
      "field": "durationdecimal",
      "type": "quantitative",
      "axis": {
        "grid": false,
        "labelExpr": "split(toString(datum.label),'.')[0] + 'd ' + (split(toString(datum.label),'.')[1] ? floor(('0.'+split(toString(datum.label),'.')[1])*24) + ':00': '0:00')"
      }
    },
    "y": {"field": "event", "type": "nominal", "title": null},
    "tooltip": [{"field": "x_dateLabelTooltip"}]
  }
}

让我知道这是否适合你。

可视化事件的持续时间

visualize the duration of events

vega-lite

vega