如何对在 vega-lite 中创建的饼图 "legend" 进行排序?
How to sort "legend" of pie chart created in vega-lite?
我正在尝试按 doc_count
对饼图的图例进行排序(与切片排序的方式相同),但我找不到如何执行此操作的方法。
图例中项目的所需顺序是:
c
f
e
b
a
d
(按 doc_count 排序)
有人可以帮帮我吗?谢谢
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple pie chart with embedded data.",
"width": "600",
"data": {
"values": [
{"key": "a", "doc_count": 4},
{"key": "b", "doc_count": 6},
{"key": "c", "doc_count": 20},
{"key": "d", "doc_count": 3},
{"key": "e", "doc_count": 7},
{"key": "f", "doc_count": 8}
]
},
"transform": [
{
"calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
"as": "maybeLabel"
},
{
"calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
"as": "label"
},
{
"window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
"frame": [null, null]
},
{
"calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
"as": "percents"
}
],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "label",
"type": "nominal",
"legend": {"labelFontSize": 14},
"sort": {"field": "doc_count"} // <- this does not work
}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"fontWeight": "bold",
"radius": 240
},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {"field": "label", "type": "nominal"}
}
},
{
"mark": {"type": "text", "radius": 150, "fontSize": 13},
"encoding": {
"text": {"field": "percents", "type": "nominal"},
"color": {"value": "white"}
}
}
],
"encoding": {
"theta": {"field": "doc_count", "type": "quantitative", "stack": true},
"order": {
"field": "doc_count",
"type": "quantitative",
"sort": "descending"
},
"tooltip": [
{"field": "label", "type": "nominal"},
{"field": "doc_count", "type": "quantitative"},
{"field": "percents", "type": "nominal"}
]
},
"view": {"stroke": null}
}
您的更改几乎是正确的,您只是错过了添加颜色排序顺序。还要在其他层中重复排序,这将为您解决排序问题。
下面是片段和 editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple pie chart with embedded data.",
"width": "600",
"data": {
"values": [
{"key": "a", "doc_count": 4},
{"key": "b", "doc_count": 6},
{"key": "c", "doc_count": 20},
{"key": "d", "doc_count": 3},
{"key": "e", "doc_count": 7},
{"key": "f", "doc_count": 8}
]
},
"transform": [
{
"calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
"as": "maybeLabel"
},
{
"calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
"as": "label"
},
{
"window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
"frame": [null, null]
},
{
"calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
"as": "percents"
}
],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "label",
"type": "nominal",
"legend": {"labelFontSize": 14},
"sort": {"field": "doc_count", "order": "descending"}
}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"fontWeight": "bold",
"radius": 240
},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {
"field": "label",
"type": "nominal",
"sort": {"field": "doc_count", "order": "descending"}
}
}
},
{
"mark": {"type": "text", "color": "white", "radius": 150, "fontSize": 13},
"encoding": {"text": {"field": "percents", "type": "nominal"}}
}
],
"encoding": {
"theta": {"field": "doc_count", "type": "quantitative", "stack": true},
"order": {
"field": "doc_count",
"type": "quantitative",
"sort": "descending"
},
"tooltip": [
{"field": "label", "type": "nominal"},
{"field": "doc_count", "type": "quantitative"},
{"field": "percents", "type": "nominal"}
]
},
"view": {"stroke": null}
}
我正在尝试按 doc_count
对饼图的图例进行排序(与切片排序的方式相同),但我找不到如何执行此操作的方法。
图例中项目的所需顺序是:
c
f
e
b
a
d
(按 doc_count 排序)
有人可以帮帮我吗?谢谢
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple pie chart with embedded data.",
"width": "600",
"data": {
"values": [
{"key": "a", "doc_count": 4},
{"key": "b", "doc_count": 6},
{"key": "c", "doc_count": 20},
{"key": "d", "doc_count": 3},
{"key": "e", "doc_count": 7},
{"key": "f", "doc_count": 8}
]
},
"transform": [
{
"calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
"as": "maybeLabel"
},
{
"calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
"as": "label"
},
{
"window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
"frame": [null, null]
},
{
"calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
"as": "percents"
}
],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "label",
"type": "nominal",
"legend": {"labelFontSize": 14},
"sort": {"field": "doc_count"} // <- this does not work
}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"fontWeight": "bold",
"radius": 240
},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {"field": "label", "type": "nominal"}
}
},
{
"mark": {"type": "text", "radius": 150, "fontSize": 13},
"encoding": {
"text": {"field": "percents", "type": "nominal"},
"color": {"value": "white"}
}
}
],
"encoding": {
"theta": {"field": "doc_count", "type": "quantitative", "stack": true},
"order": {
"field": "doc_count",
"type": "quantitative",
"sort": "descending"
},
"tooltip": [
{"field": "label", "type": "nominal"},
{"field": "doc_count", "type": "quantitative"},
{"field": "percents", "type": "nominal"}
]
},
"view": {"stroke": null}
}
您的更改几乎是正确的,您只是错过了添加颜色排序顺序。还要在其他层中重复排序,这将为您解决排序问题。 下面是片段和 editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple pie chart with embedded data.",
"width": "600",
"data": {
"values": [
{"key": "a", "doc_count": 4},
{"key": "b", "doc_count": 6},
{"key": "c", "doc_count": 20},
{"key": "d", "doc_count": 3},
{"key": "e", "doc_count": 7},
{"key": "f", "doc_count": 8}
]
},
"transform": [
{
"calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.key]",
"as": "maybeLabel"
},
{
"calculate": "datum.maybeLabel ? datum.maybeLabel + ' (' + datum.key + ')' : datum.key",
"as": "label"
},
{
"window": [{"op": "sum", "field": "doc_count", "as": "totalValue"}],
"frame": [null, null]
},
{
"calculate": "(round(datum.doc_count/datum.totalValue * 100 * 100) / 100) + ' %'",
"as": "percents"
}
],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "label",
"type": "nominal",
"legend": {"labelFontSize": 14},
"sort": {"field": "doc_count", "order": "descending"}
}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"fontWeight": "bold",
"radius": 240
},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {
"field": "label",
"type": "nominal",
"sort": {"field": "doc_count", "order": "descending"}
}
}
},
{
"mark": {"type": "text", "color": "white", "radius": 150, "fontSize": 13},
"encoding": {"text": {"field": "percents", "type": "nominal"}}
}
],
"encoding": {
"theta": {"field": "doc_count", "type": "quantitative", "stack": true},
"order": {
"field": "doc_count",
"type": "quantitative",
"sort": "descending"
},
"tooltip": [
{"field": "label", "type": "nominal"},
{"field": "doc_count", "type": "quantitative"},
{"field": "percents", "type": "nominal"}
]
},
"view": {"stroke": null}
}