antvis / antvis/G2

[Feat]: 环图/饼图的小切片(极小占比)的自动优化与可读性增强

Open
#7,191 5 comments 0 reactions 0 assignees View on GitHub
feature 💡 OSCP P3
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);
}
`

Image

Image

### Are you willing to contribute? / 是否愿意参与贡献?

❌ No / 否

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.