堆栈内存溢出
  繁体   English   中英

Vega-Lite 分档折线图

[英]Vega-Lite Binned Line Chart

 原文  2021-07-16 15:31:57  6   2    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>

2 个解决方案

解决方案1
 1  2021-07-16 18:03:20

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

  1. Band : 在x编码中添加bandPosition （设计更简单） 请参阅 Vega Editor
  "x": {
    ...,
    "bandPosition": 0,
    "scale": { "domain": ["2021-07-10T00:00:00Z", "2021-07-10T23:00:00Z"]},
  },
  1. Axis ：在x编码的axis添加tickOffset和labelOffset （刻度/标签是分开的，并且在px方面更可控） 参见Vega Editor
  "x": {
    ...,
    "axis": { "tickOffset": 10, "labelOffset": 10 }
  },

解决方案2
 1 已采纳  2021-07-17 13:08:51

您可以按 x 轴的比例提供填充，这样您就可以删除间距。 还有其他配置，如innerPadding ，您可以查看文档。 但是填充似乎有效。 还注意到通过删除x2编码给出了开始/结束与边缘连接的相同结果。 请参阅编辑器并在下面剪下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {"type": "fit", "resize": true, "contains": "content"},
  "height": 150,
  "width": "container",
  "data": {
    "values": [
      {
        "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
      }
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {
      "field": "start_time",
      "bin": {"binned": true},
      "scale": {"padding": "-8"},
      "type": "temporal",
      "title": "Time"
    },
    "x2": {"field": "end_time"},
    "y": {"field": "value", "type": "quantitative", "title": "Count"}
  }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Vega-Lite 中注释折线图？ 如何在 vega-lite 的折线图中画一条线？ Vega-Lite 中的重新缩放图表 如何使用Vega-lite在折线图上分层移动平均线？ 如何在 Vega-Lite 的折线图上绘制区域？ 在 Vega/Vega-lite 中绘制漏斗图 Vega-Lite：多折线图的特定标记颜色 Vega-Lite：是否可以将图像作为折线图中的标签？ Vega-Lite 中带有多系列折线图的工具提示 API 带有选择的交互式 vega-lite / vega 图表
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM