Vega-lite 从数据中设置颜色，同时保留图例
Posted
技术标签:
【中文标题】Vega-lite 从数据中设置颜色，同时保留图例【英文标题】：Vega-lite set color from data whilst retaining a legend 【发布时间】：2020-03-14 22:56:19 【问题描述】：我正在尝试使用数据中的值来设置条形的颜色。我也希望这能反映在一个传说中。
所以我已经弄清楚了如何根据数据中的值为条形使用特定颜色：
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A bar chart that directly encodes color names in the data.",
"data":
"values": [
"color": "rgb(0, 0, 0)",
"b": 28,
"type": "outside"
,
"color": "rgb(255, 0, 0)",
"b": 55,
"type": "inside"
,
"color": "rgb(0, 255, 0)",
"b": 43,
"type": "dew"
]
,
"mark": "bar",
"encoding":
"x":
"field": "type",
"type": "nominal"
,
"y":
"field": "b",
"type": "quantitative"
,
"color": "field": "color", "type": "nominal", "legend": , "scale": null
正确的颜色条：
以上内容仅适用于"scale": null，它阻止了图例的显示。如果我删除它，则图例会显示，但自定义颜色会丢失，并且我会在图例中显示 rbg 值：
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A bar chart that directly encodes color names in the data.",
"data":
"values": [
"color": "rgb(0, 0, 0)",
"b": 28,
"type": "outside"
,
"color": "rgb(255, 0, 0)",
"b": 55,
"type": "inside"
,
"color": "rgb(0, 255, 0)",
"b": 43,
"type": "dew"
]
,
"mark": "bar",
"encoding":
"x":
"field": "type",
"type": "nominal"
,
"y":
"field": "b",
"type": "quantitative"
,
"color": "field": "color", "type": "nominal", "legend":
颜色丢失，图例标签错误：
我显然可以通过以下方式获得正确的图例标签：
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A bar chart that directly encodes color names in the data.",
"data":
"values": [
"color": "rgb(0, 0, 0)",
"b": 28,
"type": "outside"
,
"color": "rgb(255, 0, 0)",
"b": 55,
"type": "inside"
,
"color": "rgb(0, 255, 0)",
"b": 43,
"type": "dew"
]
,
"mark": "bar",
"encoding":
"x":
"field": "type",
"type": "nominal"
,
"y":
"field": "b",
"type": "quantitative"
,
"color": "field": "type", "type": "nominal", "legend":
但我仍然没有得到我想要的颜色：
是否可以同时拥有自定义颜色和图例？
【问题讨论】：
【参考方案1】：让自定义颜色出现在图例中的方法是使用带有自定义scheme 的比例尺。例如，您可以这样创建您心目中的图表：
(view in vega editor)
"data":
"values": [
"b": 28, "type": "outside",
"b": 55, "type": "inside",
"b": 43, "type": "dew"
]
,
"mark": "bar",
"encoding":
"x": "field": "type", "type": "nominal",
"y": "field": "b", "type": "quantitative",
"color":
"field": "type",
"type": "nominal",
"scale":
"domain": ["outside", "inside", "dew"],
"range": ["rgb(0, 0, 0)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"]
我不知道有什么方法可以从数据中绘制此配色方案定义，或者在将比例设置为null 时强制绘制图例，但您可以通过自己绘制图例来破解它。它可能看起来像这样：
(view in vega editor)
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A bar chart that directly encodes color names in the data.",
"data":
"values": [
"color": "rgb(0, 0, 0)", "b": 28, "type": "outside",
"color": "rgb(255, 0, 0)", "b": 55, "type": "inside",
"color": "rgb(0, 255, 0)", "b": 43, "type": "dew"
]
,
"hconcat": [
"mark": "bar",
"encoding":
"x": "field": "type", "type": "nominal",
"y": "field": "b", "type": "quantitative",
"color":
"field": "color",
"type": "nominal",
"legend": ,
"scale": null
,
"title": "type",
"mark": "type": "point", "size": 80, "shape": "square", "filled": true,
"encoding":
"y":
"field": "type",
"type": "nominal",
"axis": "orient": "right", "title": null
,
"color": "field": "color", "type": "nominal", "scale": null
]
【讨论】：
非常感谢您的回复。我得出了同样的结论。昨天我也有同样的想法，并且有一个看起来和你上面一模一样的图表，也使用了 hconcat！感谢您的确认以上是关于Vega-lite 从数据中设置颜色，同时保留图例的主要内容，如果未能解决你的问题，请参考以下文章