可视化事件的持续时间

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"}]
  }
}

让我知道这是否适合你。