使用vega-lite为烛台图着色

问题描述

我正在使用vega-lite，并且正在遵循此代码

https://vega.github.io/vega-lite/examples/layer_candlestick.html

问题是，当我添加新曲线（作为一些移动平均值）时，使用原始代码无法为我的MA着色....所以我将颜色条件（绘制绿色和红色蜡烛）移至标记内部/ bar对象，现在我的MA的颜色正确，但是我的条看起来很糟糕

{
  "data": {
    "name": "source","values": [
      {
        "Volume BTC": "356.11","ma80": 11964.9857421875,"Volume USD": "4419589.41","Low": "12371","High": "12432","ma200": 11767.991997070312,"Date": "2020-08-17T17:00:00.000Z","ma60": 12009.80966796875,"Date2": "2020-08-17 05-PM","Close": "12395","Symbol": "BTCUSD","Open": "12393.07"
      },{
        "Volume BTC": "626.08","ma80": 11971.631115722656,"Volume USD": "7767650.77","Low": "12360","High": "12490","ma200": 11773.517348632813,"Date": "2020-08-17T16:00:00.000Z","ma60": 12020.977506510417,"Date2": "2020-08-17 04-PM","Close": "12393.07","Open": "12441"
      },{
        "Volume BTC": "2014.02","ma80": 11978.585119628906,"Volume USD": "24858783.37","Low": "12148","ma200": 11779.015346679687,"Date": "2020-08-17T15:00:00.000Z","ma60": 12033.11083984375,"Date2": "2020-08-17 03-PM","Close": "12441","Open": "12182"
      },{
        "Volume BTC": "606.31","ma80": 11982.885119628907,"Volume USD": "7384157.12","Low": "12110","High": "12218","ma200": 11783.055346679688,"Date": "2020-08-17T14:00:00.000Z","ma60": 12040.26083984375,"Date2": "2020-08-17 02-PM","Close": "12182","Open": "12141"
      },{
        "Volume BTC": "3616.55","ma80": 11986.589624023438,"Volume USD": "43475507.61","Low": "11675","High": "12222","ma200": 11787.180346679688,"Date": "2020-08-17T13:00:00.000Z","ma60": 12046.394173177083,"Date2": "2020-08-17 01-PM","Close": "12141","Open": "11913.52"
      },{
        "Volume BTC": "170.68","ma80": 11987.083618164062,"Volume USD": "2034739.24","Low": "11889.8","High": "11938","ma200": 11790.362944335937,"Date": "2020-08-17T12:00:00.000Z","ma60": 12048.219498697918,"Date2": "2020-08-17 12-PM","Close": "11913.52","Open": "11937"
      },{
        "Volume BTC": "150.11","ma80": 11988.058618164063,"Volume USD": "1788458.22","Low": "11878","High": "11939.35","ma200": 11793.532944335937,"Date": "2020-08-17T11:00:00.000Z","ma60": 12050.869498697917,"Date2": "2020-08-17 11-AM","Close": "11937","Open": "11878"
      },{
        "Volume BTC": "63.25","ma80": 11988.063623046875,"Volume USD": "752225.85","Low": "11875.82","High": "11920","ma200": 11796.366845703125,"Date": "2020-08-17T10:00:00.000Z","ma60": 12052.536165364583,"Date2": "2020-08-17 10-AM","Close": "11878",{
        "Volume BTC": "67.36","ma80": 11988.501123046875,"Volume USD": "801273.13","Low": "11877.24","High": "11915","ma200": 11799.541845703125,"Date": "2020-08-17T09:00:00.000Z","ma60": 12054.919498697916,"Date2": "2020-08-17 09-AM","Open": "11891.61"
      },{
        "Volume BTC": "154.6","ma80": 11988.8548828125,"Volume USD": "1838105.41","Low": "11829","High": "11907","ma200": 11802.309897460938,"Date": "2020-08-17T08:00:00.000Z","ma60": 12057.496337890625,"Date2": "2020-08-17 08-AM","Close": "11891.61","Open": "11829"
      }
    ]
  },"height": 200,"width": 300,"scales": [
    {
      "name": "volume","type": "linear","round": true,"nice": false,"domain": {"data": "source","field": "Volume"},"range": [4,800]
    }
  ],"encoding": {
    "x": {
      "field": "Date","type": "temporal","axis": {"format": "%m/&d","labelAngle": -45}
    },"y": {
      "type": "quantitative","scale": {"zero": false},"axis": {"title": "price"}
    }
  },"layer": [
    {
      "mark": "rule","encoding": {"y": {"field": "Low"},"y2": {"field": "High"}}
    },{
      "mark": {"type": "line","color": "red","size": 2},"encoding": {"y": {"field": "ma200","title": "ma200"}}
    },"color": "blue","encoding": {"y": {"field": "ma60","title": "ma60"}}
    },"color": "yellow","encoding": {"y": {"field": "ma80","title": "ma80"}}
    },{
      "mark": {
        "type": "bar","color": {
          "condition": {"test": "datum.Open < datum.Close","value": "#06982d"},"value": "#ae1325"
        }
      },"encoding": {"y": {"field": "Open"},"y2": {"field": "Close"}}
    }
  ]
}

这是一个最少的样本，给我的蜡烛和移动平均线着色的最佳方法是什么？谢谢！

解决方法

问题是您将颜色条件放在了标记属性中，而它应该在编码中。标记属性用于图层中所有标记之间共享的常数值。

您的栏图层应如下所示：

    {
      "mark": "bar","encoding": {
        "y": {"field": "Open"},"y2": {"field": "Close"},"color": {
          "condition": {"test": "datum.Open < datum.Close","value": "#06982d"},"value": "#ae1325"
        }
      }
    }

结果看起来像这样（view in editor）：

旁注，您有一个顶级"scales"条目，该条目不是有效的Vega-Lite（这是Vega中使用的规范）；可能应该将其删除。