时间戳

首页 > 解决方案 > Vega-Lite 分箱折线图

vega-lite - Vega-Lite 分箱折线图

问题描述

我目前喜欢 Vega-Lite，但我遇到了一个问题，虽然我尝试了很多不同的东西，但我似乎无法弄清楚。

有没有办法让下面的 Vega-Lite 图表让线条在边缘开始和结束，而不是在垃圾箱中间开始/结束？

const data = [
  { "start_time": "2021-07-10T00:00:00Z", "end_time": "2021-07-10T01:00:00Z", "value": 30 },
  { "start_time": "2021-07-10T01:00:00Z", "end_time": "2021-07-10T02:00:00Z", "value": 100 },
  { "start_time": "2021-07-10T02:00:00Z", "end_time": "2021-07-10T03:00:00Z", "value": 190 },
  { "start_time": "2021-07-10T03:00:00Z", "end_time": "2021-07-10T04:00:00Z", "value": 120 },
  { "start_time": "2021-07-10T04:00:00Z", "end_time": "2021-07-10T05:00:00Z", "value": 70 },
  { "start_time": "2021-07-10T05:00:00Z", "end_time": "2021-07-10T06:00:00Z", "value": 60 },
  { "start_time": "2021-07-10T06:00:00Z", "end_time": "2021-07-10T07:00:00Z", "value": 33 },
  { "start_time": "2021-07-10T07:00:00Z", "end_time": "2021-07-10T08:00:00Z", "value": 127 },
  { "start_time": "2021-07-10T08:00:00Z", "end_time": "2021-07-10T09:00:00Z", "value": 200 },
  { "start_time": "2021-07-10T09:00:00Z", "end_time": "2021-07-10T10:00:00Z", "value": 50 },
  { "start_time": "2021-07-10T10:00:00Z", "end_time": "2021-07-10T11:00:00Z", "value": 60 },
  { "start_time": "2021-07-10T11:00:00Z", "end_time": "2021-07-10T12:00:00Z", "value": 70 },
  { "start_time": "2021-07-10T12:00:00Z", "end_time": "2021-07-10T13:00:00Z", "value": 80 },
  { "start_time": "2021-07-10T13:00:00Z", "end_time": "2021-07-10T14:00:00Z", "value": 90 },
  { "start_time": "2021-07-10T14:00:00Z", "end_time": "2021-07-10T15:00:00Z", "value": 100 },
  { "start_time": "2021-07-10T15:00:00Z", "end_time": "2021-07-10T16:00:00Z", "value": 22 },
  { "start_time": "2021-07-10T16:00:00Z", "end_time": "2021-07-10T17:00:00Z", "value": 190 },
  { "start_time": "2021-07-10T17:00:00Z", "end_time": "2021-07-10T18:00:00Z", "value": 37 },
  { "start_time": "2021-07-10T18:00:00Z", "end_time": "2021-07-10T19:00:00Z", "value": 33 },
  { "start_time": "2021-07-10T19:00:00Z", "end_time": "2021-07-10T20:00:00Z", "value": 150 },
  { "start_time": "2021-07-10T20:00:00Z", "end_time": "2021-07-10T21:00:00Z", "value": 170 },
  { "start_time": "2021-07-10T21:00:00Z", "end_time": "2021-07-10T22:00:00Z", "value": 130 },
  { "start_time": "2021-07-10T22:00:00Z", "end_time": "2021-07-10T23:00:00Z", "value": 200 },
  { "start_time": "2021-07-10T23:00:00Z", "end_time": "2021-07-10T24:00:00Z", "value": 55 }
];

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {
    "type": "fit",
    "resize": true,
    "contains": "content"
  },
  "height": 150,
  "width": "container",
  "data": { "values": data },
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {
      "field": "start_time",
      "bin": { "binned": true },
      "type": "temporal",
      "title": "Time"
    },
    "x2": {
      "field": "end_time"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": "Count"
    }
  }
};

vegaEmbed('#vis', spec);
#vis {
  width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>

<div id="vis"></div>

标签： vega-lite

解决方案

据我所知，至少有两种方法可以做到这一点：

  1. 乐队：添加编码（设计更容易） bandPosition参见Vega Editorx
  "x": {
    ...,
    "bandPosition": 0,
    "scale": { "domain": ["2021-07-10T00:00:00Z", "2021-07-10T23:00:00Z"]},
  },
  1. 轴：添加tickOffset和编码（刻度/标签是分开的，并且在 px 方面更可控） 参见labelOffsetVega编辑器axisx
  "x": {
    ...,
    "axis": { "tickOffset": 10, "labelOffset": 10 }
  },

推荐阅读