【v5】 多轴配置 scrollbar \ silder 交互出错
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述
```
import { Chart } from '@antv/g2';
const data = [
{
Month: 'Jan',
Evaporation: 2,
Precipitation: 2.6,
Temperature: 2,
},
{
Month: 'Feb',
Evaporation: 4.9,
Precipitation: 5.9,
Temperature: 2.2,
},
{
Month: 'Mar',
Evaporation: 7,
Precipitation: 9,
Temperature: 3.3,
},
{
Month: 'Apr',
Evaporation: 23.2,
Precipitation: 26.4,
Temperature: 4.5,
},
{
Month: 'May',
Evaporation: 25.6,
Precipitation: 28.7,
Temperature: 6.3,
},
{
Month: 'Jun',
Evaporation: 76.7,
Precipitation: 70.7,
Temperature: 10.2,
},
{
Month: 'Jul',
Evaporation: 135.6,
Precipitation: 175.6,
Temperature: 20.3,
},
{
Month: 'Aug',
Evaporation: 162.2,
Precipitation: 182.2,
Temperature: 23.4,
},
{
Month: 'Sep',
Evaporation: 32.6,
Precipitation: 48.7,
Temperature: 23,
},
{
Month: 'Oct',
Evaporation: 20,
Precipitation: 18.8,
Temperature: 16.5,
},
{
Month: 'Nov',
Evaporation: 6.4,
Precipitation: 6,
Temperature: 12,
},
{
Month: 'Dec',
Evaporation: 3.3,
Precipitation: 2.3,
Temperature: 6.2,
},
];
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.data(data);
chart
.line()
.encode('x', 'Month')
.encode('y', 'Temperature')
.encode('color', '#EE6666')
.encode('shape', 'smooth')
.scale('y', { independent: true, domainMax: 30 })
.axis('y', {
title: 'Temperature (°C)',
grid: null,
titleFill: '#EE6666',
})
.scrollbar({
y:{}
});
chart
.interval()
.encode('x', 'Month')
.encode('y', 'Evaporation')
.encode('color', '#5470C6')
.scale('y', { domainMax: 200 },)
.style('fillOpacity', 0.8)
.axis('y', {
position: 'right',
title: 'Evaporation (ml)',
titleFill: '#5470C6',
}) .scrollbar({
y:{
position: 'right'
}
});
chart
.line()
.encode('x', 'Month')
.encode('y', 'Precipitation')
.encode('color', '#91CC75')
.style('lineWidth', 2)
.style('lineDash', [2, 2])
.axis('y', {
position: 'right',
title: 'Precipitation (ml)',
grid: null,
titleFill: '#91CC75',
});
chart.render();
```
### 重现链接
_No response_
### 重现步骤
_No response_
### 预期行为
_No response_
### 平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
### 屏幕截图或视频(可选)
_No response_
### 补充说明(可选)
_No response_
Contributor guide
Research direction
Start by running the provided TypeScript G2 example with the three axes and two scrollbar configurations. Reproduce the reported scrollbar interaction error and determine the intended behavior for the left and right scrollbars; the issue provides no reproduction link, steps, expected behavior, or source file to inspect. Done should mean the multi-axis scrollbar interaction works as intended and is covered by a regression check.
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
- Needs clarification
- Newbie friendliness
- 25/100