[V5]设置柱状图的最大宽度,联通区域不会跟随柱子宽度进行调整
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
- **G2 Version**: 5.1.0
- **Platform**: mac
- **Mini Showcase(like screenshots)**:

- **CodePen Link**:
代码(直接粘贴在官网示例中跑):
```javascript
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.interval()
.data({
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json',
})
.transform({ type: 'stackY' })
.transform({ type: 'sortX', by: 'y', reverse: true })
.encode('x', 'year')
.encode('y', 'value')
.encode('color', 'type')
.style({
maxWidth:80
})
chart.interaction('elementHighlightByColor', {
link: true,
}).state('active', { fill: 'red', linkFillOpacity: 0.5 })
.state('inactive', { opacity: 0.5 });
chart.render();
```
Contributor guide
Research direction
Start with the provided G2 reproduction, focusing on the interval mark's style maxWidth setting and the elementHighlightByColor interaction with link enabled. Compare the rendered bar width with the linked highlight region. Done means the linked region follows the bar's constrained width; verify the behavior using the example data and interaction states.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100