antvis / antvis/G2

在S2单元格中绘制G2折线图,当单元格高度偏小时y坐标轴反转

Open
#6,290 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

### 问题描述

在S2单元格中绘制G2折线图,当单元格高度偏小时y坐标轴反转,可查看在s2中提的issue:[https://github.com/antvis/S2/issues/2773](https://github.com/antvis/S2/issues/2773)

![image](https://github.com/antvis/G2/assets/11677125/f4bd8c26-60dc-43e6-8af5-d4be5a54ff2f)

### 重现链接

_No response_

### 重现步骤

1. 在s2官网demo[https://s2.antv.antgroup.com/zh/examples/custom/custom-shape-and-chart#custom-g2-chart](https://s2.antv.antgroup.com/zh/examples/custom/custom-shape-and-chart#custom-g2-chart)修改折线图配置如下:
```javascript
values: {
type: 'line',
autoFit: false,
padding: 0,
data: [
{ year: '1991', value: 3 },
{ year: '1992', value: 7 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 14 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
],
encode: {
x: 'year',
y: 'value',
shape: 'smooth',
color: '#1b6bba',
},
scale: {
y: {
nice: true,
reverse: true,
}
},
axis: false,
labels: [],

},
```

2. 可修改dataCell的height为 100 与 30,进行对比:

image

### 预期行为

_No response_

### 平台

- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]

### 屏幕截图或视频(可选)

image
image

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the S2 custom G2 chart demo linked in the issue and reproduce the line chart with dataCell heights of 100 and 30 using the shown configuration. Trace how the embedded chart handles its plot height and reversed y scale. Done means the y-axis and line remain correctly oriented at both heights.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.