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

axis label autoHide: false 未生效 #4898

Closed
lishan-ls opened this issue Apr 19, 2023 · 7 comments
Closed

axis label autoHide: false 未生效 #4898

lishan-ls opened this issue Apr 19, 2023 · 7 comments
Assignees

Comments

@lishan-ls
Copy link

autoHide: false 未生效,另自动隐藏逻辑是根据原数据的字体长度进行计算,并没有按照formatter后的实际长度计算。
image

@lishan-ls
Copy link
Author

G2 4.2.10

@hustcc hustcc self-assigned this Apr 23, 2023
@hustcc
Copy link
Member

hustcc commented Apr 23, 2023

G2 4.2.10

可以提供一个完整的代码吗?我这里测试是对的。

image

@lishan-ls
Copy link
Author

lishan-ls commented Apr 23, 2023

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

const data = [
{ year: '2002-01-01', value: 10 },
{ year: '2003', value: 20 },
{ year: '2004', value: 50 },
{ year: '2005', value: 40 },
{ year: '2006', value: 50 },
{ year: '2007', value: 20 },
{ year: '2008', value: 25 },
{ year: '2009', value: 70 },
{ year: '2010', value: 120 },
{ year: '2011', value: 140 },
{ year: '2012', value: 80 },
{ year: '2013', value: 250 },
{ year: '2014', value: 280 },
{ year: '2015', value: 400 },
{ year: '2016', value: 400 },
{ year: '2017', value: 800 },
{ year: '2018', value: 1000 }
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
  padding: [20, 40],
});

chart.scale({
  Year: {
    range: [0, 1],
    type: 'cat',
  },
  value: {
    alias: '市值 (亿美元)',
    sync: true,
    nice: true
  },
});

chart.axis('year', {
  tickLine: null
});

chart.data(data);
chart
  .interval()
  .position('year*value')
  .style({
    fillOpacity: 1,
  });

chart.axis('year', {
  label: {
    // formatter: () => "1"
  }
})

chart.render();

@lishan-ls
Copy link
Author

G2 4.2.10

可以提供一个完整的代码吗?我这里测试是对的。

image

数据源第一项的数据给长一点就复现了
image

@hustcc
Copy link
Member

hustcc commented Apr 23, 2023

复现了,我排查看看!

@hustcc
Copy link
Member

hustcc commented Apr 24, 2023

上述代码中,多个问题导致了这个 bug,正确的写法:

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

const data = [
{ year: '2002-01-01', value: 10 },
{ year: '2003', value: 20 },
{ year: '2004', value: 50 },
{ year: '2005', value: 40 },
{ year: '2006', value: 50 },
{ year: '2007', value: 20 },
{ year: '2008', value: 25 },
{ year: '2009', value: 70 },
{ year: '2010', value: 120 },
{ year: '2011', value: 140 },
{ year: '2012', value: 80 },
{ year: '2013', value: 250 },
{ year: '2014', value: 280 },
{ year: '2015', value: 400 },
{ year: '2016', value: 400 },
{ year: '2017', value: 800 },
{ year: '2018', value: 1000 }
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
  padding: [20, 40],
});

chart.scale({
  year: {   // 👈🏻 这里 year 的 y 小写
    range: [0, 1],
    type: 'cat',   // 👈🏻 这里强制设置为字符串分类类型
  },
  value: {
    alias: '市值 (亿美元)',
    sync: true,
    nice: true
  },
});

chart.data(data);
chart
  .interval()
  .position('year*value')
  .style({
    fillOpacity: 1,
  });

chart.axis('year', {    // 👈🏻,原 demo 代码中,有两个 chart.axis,导致后 autoHide 没生效。
  label: {
    // formatter: () => "1"
  }
})

chart.render();

另外,为什么第一个数据 写成 2002-01-01 会触发 bug,因为 G2 内部推断数据类型的时候,是去第一条数据,所以第一个数据写成 2002-01-01,会自动讲 year 识别成 时间类型。

@hustcc hustcc closed this as completed Apr 24, 2023
@lishan-ls
Copy link
Author

已解决,赞~

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