Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 5 tasks
wyh888 opened this issue Jun 14, 2024 · 1 comment
Open
1 of 5 tasks
Labels
💤 inactive 不活跃的 Issue 或 PR, 30天没有回复 next 2.0-next 版本的问题

Comments

@wyh888
Copy link

wyh888 commented Jun 14, 2024

🏷 Version

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

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 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
@github-actions github-actions bot added the next 2.0-next 版本的问题 label Jun 14, 2024
@wyh888 wyh888 changed the title 🐛在单元格中绘制G2折线图,当单元格高度偏小时y坐标系反转 🐛在单元格中绘制G2折线图,当单元格高度偏小时y坐标轴反转 Jun 14, 2024
@lijinke666
Copy link
Member

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

public getRenderChartOptions() {
const chartData = this.getRenderChartData();
const cellArea = this.getBBoxByType(CellClipBox.CONTENT_BOX);
const themeName = this.spreadsheet.getThemeName();
return {
autoFit: true,
theme: { type: G2_THEME_TYPE[themeName] },
...cellArea,
...chartData,
};
}

height: 30

image

height: 100

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💤 inactive 不活跃的 Issue 或 PR, 30天没有回复 next 2.0-next 版本的问题
Projects
None yet
Development

No branches or pull requests

2 participants