The issue has been closed

axis label autoHide: false 未生效 #4898

lishan-ls posted onGitHub

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

G2 4.2.10

posted by lishan-ls about 2 years ago

G2 4.2.10

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

posted by hustcc about 2 years ago

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();

posted by lishan-ls about 2 years ago

G2 4.2.10

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

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

posted by lishan-ls about 2 years ago

复现了，我排查看看！

posted by hustcc about 2 years ago

上述代码中，多个问题导致了这个 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 识别成时间类型。

posted by hustcc almost 2 years ago

已解决，赞~

posted by lishan-ls almost 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

axis label autoHide: false 未生效 #4898

Company

Community

Support

Connect