使用 vega-lite 为烛台图着色
[英]colorize a candlestick chart using vega-lite
问题描述
I'm using vega-lite and I'm following this code
我正在使用 vega-lite 并且正在遵循此代码
https://vega.github.io/vega-lite/examples/layer_candlestick.html https://vega.github.io/vega-lite/examples/layer_candlestick.html
the problem happens when I add new curves, as some moving averages, with the original code I can't colorize my MA's....so I move the color condition (to draw green and red candles) to inside the mark/bar object, now my MA's are colored correctly but my bars looks terrible当我添加新曲线时出现问题，作为一些移动平均线，使用原始代码我无法为我的 MA 着色......所以我将颜色条件（绘制绿色和红色蜡烛）移动到标记/条形对象内部，现在我的 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",
"Symbol": "BTCUSD",
"Open": "12441"
},
{
"Volume BTC": "2014.02",
"ma80": 11978.585119628906,
"Volume USD": "24858783.37",
"Low": "12148",
"High": "12490",
"ma200": 11779.015346679687,
"Date": "2020-08-17T15:00:00.000Z",
"ma60": 12033.11083984375,
"Date2": "2020-08-17 03-PM",
"Close": "12441",
"Symbol": "BTCUSD",
"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",
"Symbol": "BTCUSD",
"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",
"Symbol": "BTCUSD",
"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",
"Symbol": "BTCUSD",
"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",
"Symbol": "BTCUSD",
"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",
"Symbol": "BTCUSD",
"Open": "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",
"Close": "11878",
"Symbol": "BTCUSD",
"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",
"Symbol": "BTCUSD",
"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"}}
},
{
"mark": {"type": "line", "color": "blue", "size": 2},
"encoding": {"y": {"field": "ma60", "title": "ma60"}}
},
{
"mark": {"type": "line", "color": "yellow", "size": 2},
"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"}}
}
]
}
here is a minimal sample, what would the best way to colorize my candles and moving averages?这是一个最小的样本，为我的蜡烛和移动平均线着色的最佳方法是什么？ thanks!谢谢！
1 个解决方案
解决方案1
1 已采纳 2020-09-13 16:46:15
The issue is that you put your color condition in the mark properties, while it should be within the encodings.问题是您将颜色条件放在标记属性中，而它应该在编码范围内。 Mark properties are intended for constant values that are shared between all marks in the layer.标记属性用于在图层中的所有标记之间共享的常量值。
Your bar layer should look like this:您的条形层应如下所示：
{
"mark": "bar",
"encoding": {
"y": {"field": "Open"},
"y2": {"field": "Close"},
"color": {
"condition": {"test": "datum.Open < datum.Close", "value": "#06982d"},
"value": "#ae1325"
}
}
}
The result looks like this ( view in editor ):结果如下所示（ 在编辑器中查看）：
Side-note, you have a top-level "scales" entry, which is not valid Vega-Lite (it is a specification used in Vega);旁注，您有一个顶级"scales"条目，它不是有效的 Vega-Lite（它是 Vega 中使用的规范）； it should probably be removed.它可能应该被删除。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.