首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Deneb,如何创建具有水平和垂直线条和标签的线图

Deneb,如何创建具有水平和垂直线条和标签的线图
EN

Stack Overflow用户
提问于 2022-09-16 15:20:55
回答 1查看 99关注 0票数 0

Deneb (Vega )规范会是什么样子,可以画出这样的线图+带有自定义标签的横线和垂直线,其中这些水平和垂直线与轴线相交?

好吧,这是我的尝试。我需要帮助-不知道如何添加标签,当横线和垂直线满足y和x轴?

代码语言:javascript
复制
{
"data": {
    "values": [
        {"date": "2010-01-01", "price": "300", "source": "A"},
        {"date": "2011-01-01", "price": "315", "source": "A"},
        {"date": "2012-01-01", "price": "285", "source": "A"},
        {"date": "2013-01-01", "price": "345", "source": "A"},
        {"date": "2014-01-01", "price": "365", "source": "A"},
        {"date": "2015-01-01", "price": "385", "source": "A"},

        {"date": "2016-01-01", "price": "415", "source": "A"},
        {"date": "2017-01-01", "price": "400", "source": "A"},
        {"date": "2018-01-01", "price": "380", "source": "A"},
        {"date": "2019-01-01", "price": "270", "source": "A"},
        {"date": "2020-01-01", "price": "325", "source": "A"},
      
        {"date": "2021-01-01", "price": "345", "source": "A"},
        {"date": "2022-01-01", "price": "360", "source": "A"},

        {"date": "2015-01-01", "price": "385", "source": "B"},
        {"date": "2010-01-01", "price": "385", "source": "B"},

        {"date": "2015-01-01", "price": "385", "source": "C"},
        {"date": "2015-01-01", "price": "0", "source": "C"}


      
      ]
  },

"layer" : [
    {
        "width": 500,
        "height": 250,        
        "mark": "line",
        
        "transform": [{"filter": "datum.source==='A'"}],
        
        "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
        }
    },

    {
        "mark": {"type":"line", "strokeDash": [3,1]},
        
        "transform": [{"filter": "datum.source==='B'"}],

        "encoding": {
            "x": {"field": "date", "type": "temporal"},
            "y": {"field": "price", "type": "quantitative"}
        }
    },

    {
      "mark": {"type":"line", "strokeDash": [3,1]},
      
      "transform": [{"filter": "datum.source==='C'"}],

      "encoding": {
          "x": {"field": "date", "type": "temporal"},
          "y": {"field": "price", "type": "quantitative"}
      }
  }
]

}

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-16 17:26:33

尝尝这个。

代码语言:javascript
复制
{
  "data": {
    "values": [
      {"date": "2010-01-01", "price": "300", "source": "A"},
      {"date": "2011-01-01", "price": "315", "source": "A"},
      {"date": "2012-01-01", "price": "285", "source": "A"},
      {"date": "2013-01-01", "price": "345", "source": "A"},
      {"date": "2014-01-01", "price": "365", "source": "A"},
      {"date": "2015-01-01", "price": "385", "source": "A"},
      {"date": "2016-01-01", "price": "415", "source": "A"},
      {"date": "2017-01-01", "price": "400", "source": "A"},
      {"date": "2018-01-01", "price": "380", "source": "A"},
      {"date": "2019-01-01", "price": "270", "source": "A"},
      {"date": "2020-01-01", "price": "325", "source": "A"},
      {"date": "2021-01-01", "price": "345", "source": "A"},
      {"date": "2022-01-01", "price": "360", "source": "A"},
      {"date": "2015-01-01", "price": "385", "source": "B"},
      {"date": "2010-01-01", "price": "385", "source": "B"},
      {"date": "2015-01-01", "price": "385", "source": "C"},
      {"date": "2015-01-01", "price": "0", "source": "C"}
    ]
  },
  "width": 500,
  "height": 250,
  "layer": [
    {
      "mark": "line",
      "transform": [{"filter": "datum.source==='A'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [3, 1]},
      "transform": [{"filter": "datum.source==='B'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [3, 1]},
      "transform": [{"filter": "datum.source==='C'"}],
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "text": "Label A",
        "dx": -50,
        "dy": 0,
        "color": "red"
      },
      "encoding": {"x": {"datum": {"year": 2010}}, "y": {"datum": 385}}
    },
    {
      "data": {"values": [{}]},
      "mark": {
        "type": "text",
        "text": "Label B",
        "dx": 0,
        "dy": 30,
        "color": "red"
      },
      "encoding": {"x": {"datum": {"year": 2015}}, "y": {"datum": 0}}
    }
  ]
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73747037

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档