antvis / antvis/G2

[Feat]: 环图图例置灰时 itemValue 未同步置灰的问题

Open
#7,176 1 comment 0 reactions 0 assignees View on GitHub
waiting for maintainer
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### Describe the feature / 功能描述

问题描述 / Problem Description
在 AntV G2 5.4.0 版本中,当环图(饼图)的图例项被点击禁用时,只有 itemLabelText(标签文字)会置灰,而 itemValueText(标签值)不会置灰,导致视觉效果不一致。
期望行为: 当图例项被禁用时,itemLabelText 和 itemValueText 应该同时置灰,保持一致的视觉效果。
实际行为: 只有 itemLabelText 置灰,itemValueText 保持原样。

`import { Chart } from '@antv/g2';

const chart = new Chart({
container: 'container',
autoFit: true,
height: 300,
});

const data = [
{ type: '分类一', value: 27, percentage: 27 },
{ type: '分类二', value: 25, percentage: 25 },
{ type: '分类三', value: 18, percentage: 18 },
{ type: '分类四', value: 15, percentage: 15 },
{ type: '其他', value: 15, percentage: 15 },
];

chart
.interval()
.coordinate({ type: 'theta', innerRadius: 0.65 })
.transform([{ type: 'stackY' }])
.data(data)
.encode('y', 'value')
.encode('color', 'type')
.animate(false);

chart.legend('color', {
position: 'right',
itemLabelText: (_, index) => data[index].type,
itemValueText: (_, index) => `${data[index].percentage}%`,
itemLabelFill: '#6D7175',
itemValueFill: '#6D7175',
});

chart.render();`

复现步骤
渲染上述环图
点击任意图例项来禁用它
观察图例项的视觉变化
预期结果: 图例项的标签文字和百分比值都应该置灰
实际结果: 只有标签文字置灰,百分比值保持原色
环境信息 / Environment
G2 版本: 5.4.0
浏览器: Chrome/Safari/Firefox(所有主流浏览器)
操作系统: macOS/Windows/Linux(跨平台问题)
尝试的解决方案 / Attempted Solutions
我们尝试了以下方法,但都无法解决问题:

使用回调函数动态设置样式:
`itemLabelFill: (datum) => {
return datum.unchecked ? '#aaa' : '#6D7175';
},
itemValueFill: (datum) => {
return datum.unchecked ? '#aaa' : '#6D7175';
},`
2. 使用透明度控制
`itemLabelFillOpacity: (datum) => {
return datum.unchecked ? 0.45 : 0.9;
},
itemValueFillOpacity: (datum) => {
return datum.unchecked ? 0.45 : 0.65;
},`

影响范围 / Impact
这个问题影响了用户体验的一致性,特别是在需要精确视觉反馈的数据可视化场景中。目前我们不得不实现完全自定义的图例来解决这个问题,增加了开发和维护成本。

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

❌ No / 否

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the provided G2 5.4.0 donut-chart example and tracing the legend's disabled-item rendering path; the payload does not name a source file or test. Done means disabling any legend item consistently grays both itemLabelText and itemValueText, including when custom fill callbacks or opacity settings are used.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.