英文:
How to assign custom colors to bar mark in Vega-Lite
问题
这是您要翻译的代码部分。不要翻译下面的代码部分,只需返回翻译好的内容。
我有一个分层图表,结合了2个堆叠条形图、一个普通的条形图和一条折线图。我试图使用比例尺和域声明为堆叠的条形图指定自定义颜色代码,但是我没有得到预期的结果。
首先,尽管尝试使用不同的名义类别,但我无法将不同的颜色分配给堆叠的条。
其次,我希望在图例中显示自行车销售、汽车销售和去年同期自行车销售、汽车销售。
以下是我目前的情况:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"Month": 1,
"Category": "Bikes",
"Sales": 100,
"Sales LY": 90,
"Target": 95,
"Volume": 300
},
{
"Month": 1,
"Category": "Cars",
"Sales": 560,
"Sales LY": 800,
"Target": 880,
"Volume": 1200
},
{
"Month": 2,
"Category": "Bikes",
"Sales": 130,
"Sales LY": 170,
"Target": 190,
"Volume": 450
},
{
"Month": 2,
"Category": "Cars",
"Sales": 600,
"Sales LY": 665,
"Target": 680,
"Volume": 1200
},
{
"Month": 3,
"Category": "Bikes",
"Sales": 200,
"Sales LY": 150,
"Target": 165,
"Volume": 400
},
{
"Month": 3,
"Category": "Cars",
"Sales": 750,
"Sales LY": 1000,
"Target": 1100,
"Volume": 1200
},
{
"Month": 4,
"Category": "Bikes",
"Sales": 80,
"Sales LY": 105,
"Target": 120,
"Volume": 500
},
{
"Month": 4,
"Category": "Cars",
"Sales": 800,
"Sales LY": 600,
"Target": 660,
"Volume": 1200
}
]
},
"transform": [
{"calculate": "'Volume'", "as": "Volume Legend"},
{"calculate": "'Target'", "as": "Target Legend"},
{"calculate": "datum.Category", "as": "Category2"}
],
"height": 300,
"width": 300,
"layer": [
{
"name": "SALES",
"mark": {"type": "bar", "xOffset": 0, "size": 10},
"encoding": {
"x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"field": "Sales", "type": "quantitative"},
"color": {
"field": "Category",
"type": "nominal",
"scale": {"domain": ["Bikes", "Cars"], "range": ["#4CD964", "#39A34B"]}
}
}
},
{
"name": "SALES LY",
"mark": {"type": "bar", "xOffset": -11, "size": 10},
"encoding": {
"x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"field": "Sales LY", "type": "quantitative", "axis": null},
"color": {
"field": "Category2",
"type": "nominal",
"scale": {"domain": ["Bikes", "Cars"], "range": ["#5AC8FA", "#4496BC"]}
}
}
},
{
"name": "TARGET",
"mark": {"type": "bar", "xOffset": 11, "size": 10},
"encoding": {
"x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"aggregate": "sum", "field": "Target", "type": "quantitative", "axis": null},
"color": {
"field": "Target Legend",
"scale": {"range": ["#FFCC00"]},
"legend": {"title": ""}
}
}
},
{
"name": "VOLUME",
"mark": {"type": "line"},
"encoding": {
"x": {"field": "Month", "type": "ordinal"},
"y": {"aggregate": "sum", "field": "Volume", "type": "quantitative"},
"stroke": {
"field": "Volume Legend",
"scale": {"range": ["green"]},
"legend": {"title": ""}
}
}
}
],
"resolve": {"scale": {"y": "independent"}}
}
有关如何实现这两个目标的任何指导将不胜感激!
英文:
I have a layered chart, combining 2 stack bar charts, a normal bar chart and a line chart. I am attempting to assign bespoke color codes to the stacked bar charts using scales and domain declarations; however, I am not getting the intended results
Firstly, I am not able to assign the different colors to the stacked bars, despite attempting to use different nominal categories.
Secondly, the I would like to display Bikes Sales, Car Sales AND Bike Sales LY, Car Sales LY within the legend.
Here's where I am at the moment:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"Month": 1,
"Category": "Bikes",
"Sales": 100,
"Sales LY": 90,
"Target": 95,
"Volume": 300
},
{
"Month": 1,
"Category": "Cars",
"Sales": 560,
"Sales LY": 800,
"Target": 880,
"Volume": 1200
},
{
"Month": 2,
"Category": "Bikes",
"Sales": 130,
"Sales LY": 170,
"Target": 190,
"Volume": 450
},
{
"Month": 2,
"Category": "Cars",
"Sales": 600,
"Sales LY": 665,
"Target": 680,
"Volume": 1200
},
{
"Month": 3,
"Category": "Bikes",
"Sales": 200,
"Sales LY": 150,
"Target": 165,
"Volume": 400
},
{
"Month": 3,
"Category": "Cars",
"Sales": 750,
"Sales LY": 1000,
"Target": 1100,
"Volume": 1200
},
{
"Month": 4,
"Category": "Bikes",
"Sales": 80,
"Sales LY": 105,
"Target": 120,
"Volume": 500
},
{
"Month": 4,
"Category": "Cars",
"Sales": 800,
"Sales LY": 600,
"Target": 660,
"Volume": 1200
}
]
},
"transform": [
{"calculate": "'Volume'", "as": "Volume Legend"},
{"calculate": "'Target'", "as": "Target Legend"} ,
{"calculate": "datum.Category", "as": "Category2"}
] ,
"height": 300,
"width": 300,
"layer": [
{
"name": "SALES",
"mark": {"type": "bar", "xOffset": 0, "size": 10},
"encoding": {
"x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"field": "Sales", "type": "quantitative"},
"color": {
"field": "Category",
"type" : "nominal",
"scale":
{"domain": [ "Bikes","Cars"], "range": ["#4CD964", "#39A34B"]}
}
}
},
{
"name": "SALES LY",
"mark": {"type": "bar", "xOffset": -11, "size": 10},
"encoding": {
"x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"field": "Sales LY", "type": "quantitative", "axis": null},
"color": {
"field": "Category2",
"type" : "nominal",
"scale":
{"domain": [ "Bikes","Cars"], "range": [ "#5AC8FA", "#4496BC" ]}
}
}
},
{
"name": "TARGET",
"mark": {"type": "bar", "xOffset": 11, "size": 10},
"encoding": {
"x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
"y": {"aggregate": "sum", "field": "Target", "type": "quantitative", "axis": null},
"color": {
"field": "Target Legend",
"scale": { "range": ["#FFCC00" ]},
"legend": {"title": ""}
}}
},
{
"name": "VOLUME",
"mark": {"type": "line"},
"encoding": {
"x": {"field": "Month", "type": "ordinal"},
"y": {"aggregate": "sum", "field": "Volume", "type": "quantitative"},
"stroke": {
"field": "Volume Legend",
"scale": {"range": ["green"]},
"legend": {"title": ""}
}
}
}
],
"resolve": {"scale": {"y": "independent"}}
}
Any guidance on how to achieve these 2 outcomes would be greatly appreciated!
答案1
得分: 1
以下是翻译好的内容:
{
"calculate": "datum.Category + ' LY'",
"as": "Category2"
}
"color": {
"field": "Category",
"type" : "nominal",
"scale": {
"domain": ["Bikes", "Cars", "Bikes LY", "Cars LY"],
"range": ["#4CD964", "#39A34B", "#5AC8FA", "#4496BC"]
}
}
英文:
You're almost there. You should only append the string ' LY'
to the values of Category2
when you define it to the datum:
{
"calculate": "datum.Category + ' LY'",
"as": "Category2"
}
And also define the bar color scale once (in the same place) for all four colors:
"color": {
"field": "Category",
"type" : "nominal",
"scale": {
"domain": ["Bikes", "Cars", "Bikes LY", "Cars LY"],
"range": ["#4CD964", "#39A34B", "#5AC8FA", "#4496BC"]
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论