[Feat]: 环图/饼图的小切片(极小占比)的自动优化与可读性增强
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the feature / 功能描述
在数据分布极度不均衡的场景中,如订单来源分析,某些类别的占比(如 HR, SE, CA 等国家/地区)非常小(小于0.5)。当前问题: 当这些小切片在甜甜圈图上渲染时,它们会变成肉眼难以分辨的极细线条(如下图所示的 HR/SE/CA/ES 等),用户几乎无法辨认它们的存在和数值,严重影响图表的可读性和信息传达效率。
看起来就像少了一块,麻烦优化下
`
const chart = new Chart({
container: chartRef.current,
autoFit: true,
height: height,
width: width,
});
chart
.interval()
.coordinate({ type: "theta", innerRadius: 0.65 })
.transform([{ type: "stackY" }])
.data(filteredChartData)
.encode("y", "value")
.encode("color", "name")
.scale("color", {
range: chartColors,
})
.state("active", {
offset: 6, // hover时外移距离
})
.interaction("elementHighlight", true)
.style({
stroke: "#fff",
strokeWidth: 6,
})
.animate(false);
chart
.text()
.style("text", filteredCenterText.label)
.style("x", "50%")
.style("y", "40%")
.style("fill", "#9CA3AF")
.style("fontSize", 14)
.style("fontWeight", "normal")
.style("textAlign", "center")
.tooltip(false);
// 数值文本
chart
.text()
.style(
"text",
typeof filteredCenterText.value === "number"
? filteredCenterText.value.toLocaleString()
: filteredCenterText.value,
)
.style("x", "50%")
.style("y", "55%")
.style("fill", "#1F2937")
.style("fontSize", 24)
.style("fontWeight", "bold")
.style("textAlign", "center")
.tooltip(false);
}
`
### Are you willing to contribute? / 是否愿意参与贡献?
❌ No / 否
Contributor guide
Research direction
Start by reproducing the provided TypeScript chart configuration using an interval with a theta coordinate and very small slice values. Inspect the relevant G2 theta-coordinate and interval rendering entry points to determine how tiny slices are currently drawn. Done should mean that slices below the reported proportion remain visibly distinguishable and their values remain accurately readable, with the expected behavior covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100