antvis/G2

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

pyuyu posted onGitHub

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轴不需要旋转,然后实际渲染的时候又旋转了


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

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

Fund this Issue

$0.00
Funded

Pull requests