🐛在单元格中绘制G2折线图,当单元格高度偏小时y坐标轴反转
- Dominant language
- TypeScript
- Stars
- 1.7k
- Forks
- 220
- PR merge metrics
- No merged PRs in 30d
Description
### 🏷 Version
| Package | Version |
| -------------- | ------- |
| @antv/s2 | 2.0.0-next.21 |
| @antv/s2-react | 2.0.0-next.20 |
### Sheet Type
- [x] PivotSheet
- [ ] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [ ] EditableSheet
### 🖋 Description
官网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), 当单元格高度是30,绘制折线图坐标轴反转,如图:
### ⌨️ Code Snapshots
在官网示例中修改折线图配置如下:
```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: [],
},
```
可修改dataCell的height为 100 与 30,进行对比:
### 🔗 Reproduce Link
### 🤔 Steps to Reproduce
### 😊 Expected Behavior
### 😅 Current Behavior
### 💻 System information
| Environment | Info |
| ------- | ------- |
| System | |
| Browser | |
Contributor guide
Research direction
Start with the custom G2 chart demo linked in the issue and reproduce it with dataCell heights of 100 and 30, using the shown line-chart configuration. Trace how the chart handles its y scale and rendering bounds at the smaller height; done means the y axis and line orientation remain correct at both heights, with a regression test if the existing test structure supports it.
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
- 25/100