antvis / S2

⚡️ A practical visualization library for tabular analysis.
https://s2.antv.antgroup.com
MIT License
1.46k stars 193 forks source link

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

Open wyh888 opened 2 months ago

wyh888 commented 2 months ago

🏷 Version

Package Version
@antv/s2 2.0.0-next.21
@antv/s2-react 2.0.0-next.20

Sheet Type

🖋 Description

官网demohttps://s2.antv.antgroup.com/zh/examples/custom/custom-shape-and-chart#custom-g2-chart, 当单元格高度是30,绘制折线图坐标轴反转,如图:

image image

⌨️ Code Snapshots

在官网示例中修改折线图配置如下:

     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,进行对比:

image

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment Info
System
Browser
lijinke666 commented 2 months ago

S2 只是提供渲染容器, 然后会将单元格的高度作为图表的高度, 其他未做处理, 这个看起来是 G2 的问题, 还请在 G2 那边提一个 issue.

https://github.com/antvis/S2/blob/0ca841362bb4bbb3b81ca1046f5b4dcd7236b91e/packages/s2-core/src/cell/data-cell.ts#L105-L116

height: 30

image

height: 100

image