英文:
Vega Lite - problem with value labels in Pie chart
问题
I'm in the process of creating an interactive pie/donut chart using Vega Lite. I'm nearly finished, except for an issue with the placement of value labels around the pie chart's slices. They seem to be scattered randomly, and I'm struggling to determine the correct setup for the "mark": "text" section of my code.
Here is a shortened version of my code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"category": "b", "value": 4},
{"category": "a", "value": 6},
{"category": "f", "value": 10},
{"category": "e", "value": 3},
{"category": "c", "value": 7},
{"category": "d", "value": 8}
]
},
"layer": [
{
"params": [
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
}
],
"mark": {
"type": "arc",
"stroke": "white",
"cursor": "pointer"
},
"encoding": {
"theta": {
"field": "value",
"type": "quantitative"
},
"tooltip": [
{
"field": "value",
"title": "Participation %"
}
],
"color": {
"field": "category",
"type": "nominal",
"scale": {
"range": [
"orange",
"brown",
"red",
"gray",
"lightgray",
"azure"
]
},
"sort": {
"field": "value",
"order": "descending"
}
},
"order": {
"field": "value",
"type": "quantitative",
"sort": "descending"
},
"fillOpacity": {
"condition": [
{
"param": "highlight",
"value": 1
}
],
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"param": "highlight",
"empty": false,
"value": 5
}
],
"value": 0
}
}
},
{
"mark": {
"type": "text",
"radius": 90
},
"encoding": {
"theta": {
"field": "value",
"type": "quantitative"
},
"text": {
"field": "category",
"type": "quantitative"
}
}
}
]
}
Has anyone else encountered a similar problem and discovered a workaround? Your assistance is greatly appreciated. Thank you!
英文:
I'm in the process of creating an interactive pie/donut chart using Vega Lite. I'm nearly finished, except for an issue with the placement of value labels around the pie chart's slices. They seem to be scattered randomly, and I'm struggling to determine the correct setup for the {"mark": "text"} section of my code.
Here is a shortened version of my code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"category": "b", "value": 4},
{"category": "a", "value": 6},
{"category": "f", "value": 10},
{"category": "e", "value": 3},
{"category": "c", "value": 7},
{"category": "d", "value": 8}
]
},
"layer": [
{
"params": [
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
}
],
"mark": {
"type": "arc",
"stroke": "white",
"cursor": "pointer"
},
"encoding": {
"theta": {
"field": "value",
"type": "quantitative"
},
"tooltip": [
{
"field": "value",
"title": "Participation %"
}
],
"color": {
"field": "category",
"type": "nominal",
"scale": {
"range": [
"orange",
"brown",
"red",
"gray",
"lightgray",
"azure"
]
},
"sort": {
"field": "value",
"order": "descending"
}
},
"order": {
"field": "value",
"type": "quantitative",
"sort": "descending"
},
"fillOpacity": {
"condition": [
{
"param": "highlight",
"value": 1
}
],
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"param": "highlight",
"empty": false,
"value": 5
}
],
"value": 0
}
}
},
{
"mark": {
"type": "text",
"radius": 90
},
"encoding": {
"theta": {
"field": "value",
"type": "quantitative"
},
"text": {
"field": "category",
"type": "quantitative"
}
}
}
]
}
Has anyone else encountered a similar problem and discovered a workaround? Your assistance is greatly appreciated. Thank you!
答案1
得分: 1
像这样?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "一个包含嵌入数据的简单饼图。",
"data": {
"values": [
{"category": "b", "value": 4},
{"category": "a", "value": 6},
{"category": "f", "value": 10},
{"category": "e", "value": 3},
{"category": "c", "value": 7},
{"category": "d", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"order": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{
"params": [
{"name": "highlight", "select": {"type": "point", "on": "mouseover"}}
],
"mark": {"type": "arc", "stroke": "white", "cursor": "pointer"},
"encoding": {
"tooltip": [{"field": "value", "title": "参与率 %"}],
"color": {
"field": "category",
"type": "nominal",
"scale": {
"range": ["orange", "brown", "red", "gray", "lightgray", "azure"]
},
"sort": {"field": "value", "order": "descending"}
},
"fillOpacity": {
"condition": [{"param": "highlight", "value": 1}],
"value": 0.3
},
"strokeWidth": {
"condition": [{"param": "highlight", "empty": false, "value": 5}],
"value": 0
}
}
},
{
"mark": {"type": "text", "radius": 90},
"encoding": {"text": {"field": "value", "type": "quantitative"}}
}
]
}
英文:
Like this?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"category": "b", "value": 4},
{"category": "a", "value": 6},
{"category": "f", "value": 10},
{"category": "e", "value": 3},
{"category": "c", "value": 7},
{"category": "d", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"order": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{
"params": [
{"name": "highlight", "select": {"type": "point", "on": "mouseover"}}
],
"mark": {"type": "arc", "stroke": "white", "cursor": "pointer"},
"encoding": {
"tooltip": [{"field": "value", "title": "Participation %"}],
"color": {
"field": "category",
"type": "nominal",
"scale": {
"range": ["orange", "brown", "red", "gray", "lightgray", "azure"]
},
"sort": {"field": "value", "order": "descending"}
},
"fillOpacity": {
"condition": [{"param": "highlight", "value": 1}],
"value": 0.3
},
"strokeWidth": {
"condition": [{"param": "highlight", "empty": false, "value": 5}],
"value": 0
}
}
},
{
"mark": {"type": "text", "radius": 90},
"encoding": {"text": {"field": "value", "type": "quantitative"}}
}
]
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论