antvis / antvis/G2

【v5】 多轴配置 scrollbar \ silder 交互出错

Open
#6,031 0 comments 0 reactions 0 assignees View on GitHub
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.