德尼布 – 在甘特图中插入垂直线

huangapple go评论63阅读模式
英文:

Deneb - Insert vertical lines into gant chart

问题

我有这段代码

{
  "data": {"name": "dataset"},
  "mark": {
    "type": "bar",
    "cornerRadius": 5
  },
  "encoding": {
    "y": {
      "field": "Space_CON",
      "type": "ordinal",
      "axis": {"title": "Space"}
    },
    "yOffset": {"field": "Typ"},
    "color": {"field": "Typ"},
    "x": {
      "field": "start_n",
      "type": "quantitative",
      "axis": {"title": "Hour"}
    },
    "x2": {"field": "end_n"}
  }
}

我想在X轴值为7和17的位置插入两条垂直的红线,我该如何做?

我尝试过使用层(layers)来实现,但仍然失败了,出现了错误。有人能帮助我吗?

示例数据:
德尼布 – 在甘特图中插入垂直线

期望结果:
德尼布 – 在甘特图中插入垂直线

英文:

I have this code

    {
  "data": {"name": "dataset"},
  "mark": {
    "type": "bar",
    "cornerRadius": 5
  },
  "encoding": {
    "y": {
      "field": "Space_CON",
      "type": "ordinal",
      "axis": {"title": "Space"}
    },
    "yOffset": {"field": "Typ"},
    "color": {"field": "Typ"},
    "x": {
      "field": "start_n",
      "type": "quantitative",
      "axis": {"title": "Hour"}
    },
    "x2": {"field": "end_n"}
  }
}

I want insert two vertical red lines coresponding with X axe values 7 and 17 how I can do this ?
i tried something with layers but still faild on erors

can anybody helps me ?

Sample data:

德尼布 – 在甘特图中插入垂直线

Expected result:
德尼布 – 在甘特图中插入垂直线

答案1

得分: 1

无法使用您的示例数据,因为它是一幅图像。我将使用上次向您指出的示例来说明如何操作,您应该能够跟随。请将您上次的问题标记为已解决。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "一个带有范围数据的简单条形图(也称甘特图)。",
  "width": 500,
  "data": {
    "values": [
      {"task": "A", "start": 1, "end": 3},
      {"task": "B", "start": 3, "end": 8},
      {"task": "C", "start": 8, "end": 10}
    ]
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "task", "type": "ordinal"},
        "x": {"field": "start", "type": "quantitative"},
        "x2": {"field": "end"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 3, "type": "quantitative"},
        "stroke": {"value": "red"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 7, "type": "quantitative"},
        "stroke": {"value": "red"}
      }
    }
  ]
}

德尼布 – 在甘特图中插入垂直线

英文:

I can't use your sample data as it is an image. I will use the example I pointed you to last time to illustrate how to do this and you should be able to follow along. Please mark your last question as solved.

德尼布 – 在甘特图中插入垂直线

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with ranged data (aka Gantt Chart).",
  "width":500,
  "data": {
    "values": [
      {"task": "A", "start": 1, "end": 3},
      {"task": "B", "start": 3, "end": 8},
      {"task": "C", "start": 8, "end": 10}
    ]
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "task", "type": "ordinal"},
        "x": {"field": "start", "type": "quantitative"},
        "x2": {"field": "end"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 3, "type": "quantitative"},
        "stroke": {"value": "red"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 7, "type": "quantitative"},
        "stroke": {"value": "red"}
      }
    }
  ]
}

huangapple
  • 本文由 发表于 2023年2月23日 19:29:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75544206.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定