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

y轴label文本较长时, 会导致x轴box高度不对 #4147

Closed
pyuyu opened this issue Sep 16, 2022 · 1 comment
Closed

y轴label文本较长时, 会导致x轴box高度不对 #4147

pyuyu opened this issue Sep 16, 2022 · 1 comment

Comments

@pyuyu
Copy link

pyuyu commented Sep 16, 2022

import { Chart } from '@antv/g2';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
];
const chart = new Chart({
  container: 'container',
  // autoFit: true,
  height: 300,
  width: 200,
});
data.forEach(i => i.value = i.value * 100)
chart.data(data);


chart.axis('year', {
  label: {
    autoRotate: true,
    autoHide: false,
    style: {
      fontSize: 10,
    },
  }
})
chart.axis('value', {
  label: {
    autoRotate: true,
    autoHide: false,
    style: {
      fontSize: 30,
    },
  }
})



chart.line().position('year*value').label('value');

chart.render();

x轴设置自动旋转,当y轴labe较长时会导致x轴撑开的高度不对。 猜测: x轴计算box的时候应该没有把y轴box计算进去,然后导致计算的时候判定x轴不需要旋转,然后实际渲染的时候又旋转了

@hustcc
Copy link
Member

hustcc commented Dec 6, 2022

因为你关闭了 autoFit,所以默认留给 x 轴的位置不够,导致显示不下。所以需要手动赋予更大的padding:

const chart = new Chart({
  container: 'container',
  height: 300,
  width: 200,
  padding: [30, 10, 50, 80], // 👈🏻
});

@hustcc hustcc closed this as completed Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants