vega-lite:单个图表中的多个标记

Posted

技术标签:

【中文标题】vega-lite:单个图表中的多个标记【英文标题】:vega-lite: multiple marks in a single charts 【发布时间】:2016-10-15 10:54:09 【问题描述】:

我目前正在评估我应该为开箱即用的图表使用哪种类型的 js 图表引擎,而 vega-lite 同时非常简单和灵活。但是,我想知道在一个图表中是否可以有不止一种类型的标记。例如,我可能有一个很长的每月时间序列,我可能会考虑创建一个具有逐月平均值的条形层,而在一个线层中,我可能会拥有当前年份的观察结果的演变。

我没有在 vega-lite 的网页中看到任何带有多个标记的示例。因此,如果有人知道如何做或知道任何此类示例,我将不胜感激。

干杯

毛里西奥

【问题讨论】:

请注意,您当前的答案不适用于 vega-lite 2。请参阅:***.com/questions/45160007/… 【参考方案1】:

您可以使用"layers" 规范将多个点类型叠加在一起。它相对较新,因此 Vega-Lite 网站上的示例还不是很多,但这里有一个示例:


  "data": 
    "values": [
      "x": 1,"y": 2,
      "x": 2,"y": 4,
      "x": 3,"y": 5,
      "x": 4,"y": 3,
      "x": 5,"y": 4
    ]
  ,
  "layers": [
    
      "encoding": 
        "x": "type": "quantitative","field": "x",
        "y": "type": "quantitative","field": "y"
      ,
      "mark": "line",
      "config": "mark": "color": "#1f77b4"
    ,
    
      "encoding": 
        "x": "type": "quantitative","field": "x",
        "y": "type": "quantitative","field": "y"
      ,
      "mark": "point",
      "config": "mark": "color": "#ff7f0e"
    
  ]

每一层都是一个引用全局数据的编码;您还可以在每一层中指定不同的数据。

请注意,上述规范在 Vega-Lite 版本 1.x 中是正确的。在 Vega-Lite 版本 2.x 中,"layers" 已更改为 "layer",以及其他更改。

【讨论】:

以上是关于vega-lite:单个图表中的多个标记的主要内容,如果未能解决你的问题,请参考以下文章

如何设置 Vega-Lite 时间序列图表 x 轴的最大值和最小值?

将轴填充/内边距添加到 Vega-Lite 图表

如何在单个浏览器页面上向 Dash 应用程序添加多个图表?

从单个查询创建多个视图表

Vega-Lite 是不是提供 Vega 提供的所有功能?

Highcharts:在多个图表中同步轴标记