Vega Lite – 饼图中数值标签的问题

huangapple go评论66阅读模式
英文:

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

像这样?

Vega Lite – 饼图中数值标签的问题

{
"$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?

Vega Lite – 饼图中数值标签的问题

{
  "$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"}}
    }
  ]
}

huangapple
  • 本文由 发表于 2023年8月4日 20:45:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76836047.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定