要对齐饼图的标签和数字,可以使用Vega-Lite中的text
标记,并将其与align
属性结合使用。下面是一个示例代码,演示了如何对齐标签和数字:
{
"data": {
"values": [
{"category": "A", "value": 20},
{"category": "B", "value": 30},
{"category": "C", "value": 50}
]
},
"mark": {"type": "arc", "innerRadius": 0},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal"},
"tooltip": [
{"field": "category", "type": "nominal"},
{"field": "value", "type": "quantitative"}
]
},
"layer": [
{
"mark": {"type": "text", "align": "center"},
"encoding": {
"text": {"field": "category", "type": "nominal"},
"radius": {"value": 0.7},
"theta": {"field": "value", "type": "quantitative"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "align": "center"},
"encoding": {
"text": {"field": "value", "type": "quantitative"},
"radius": {"value": 0.9},
"theta": {"field": "value", "type": "quantitative"},
"color": {"value": "black"}
}
}
]
}
在上面的代码中,我们使用了两个text
标记来分别表示标签和数字。对于标签,我们将align
属性设置为"center"
,以使其水平居中对齐。对于数字,我们也将align
属性设置为"center"
,以使其水平居中对齐。
另外,我们还使用了layer
属性来将两个text
标记叠加在饼图上。第一个text
标记用于标签,第二个text
标记用于数字。我们分别设置了radius
属性来控制标签和数字的位置,使它们分别位于饼图的内部和外部。
通过这种方式,我们可以实现标签和数字的对齐效果。