堆叠柱形图在使用 Slider 时,更新数据会导致柱形图渲染比例错误
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述
开启了 Slider 的柱形图,当柱形数量超过当前可是宽度时,更新数据会导致柱形的比例渲染异常
```
import { Chart } from '@antv/g2';
const data = [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.interval()
.data(data)
.encode('x', '月份')
.encode('y', '月均降雨量')
//.encode('color', 'name')
//.transform({ type: 'stackY' })
.interaction('elementHighlight', { background: true })
.slider('x', {values: [0, 0.5]});
chart.render();
setTimeout(() => {
const node =chart.getNodeByType('interval');
node.data(data);
chart.render();
}, 3000);
```
Contributor guide
Research direction
Start with the provided Chart reproduction, especially interval().data(), slider('x'), node.data(data), and chart.render(). Inspect the slider and data-update rendering path to determine why bar proportions change when the data is refreshed. Done means the reproduced chart keeps correct proportions after the delayed update.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100