antvis/G2

堆叠面积图的缺失值问题 #4684

pearmini posted onGitHub

目前对面积图和折线图做了缺失值处理,但是堆叠面积图还没有处理。

  • 版本:5.0.0-beta.10

image

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

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

const data = [
  {
    date: '02-18',
    status: 'E',
    count: 37,
  },
  {
    date: '02-17',
    status: 'E',
    count: 2,
  },
  {
    date: '02-23',
    status: 'F',
    count: 642,
  },
  {
    date: '02-22',
    status: 'F',
    count: 1266,
  },
  {
    date: '02-21',
    status: 'F',
    count: 1344,
  },
  {
    date: '02-20',
    status: 'F',
    count: 56,
  },
  {
    date: '02-19',
    status: 'F',
    count: 1343,
  },
  {
    date: '02-18',
    status: 'F',
    count: 1297,
  },
  {
    date: '02-17',
    status: 'F',
    count: 1317,
  },
  {
    date: '02-23',
    status: 'P',
    count: 233,
  },
  {
    date: '02-22',
    status: 'P',
    count: 546,
  },
  {
    date: '02-21',
    status: 'P',
    count: 1192,
  },
  {
    date: '02-20',
    status: 'P',
    count: 8,
  },
  {
    date: '02-19',
    status: 'P',
    count: 1211,
  },
  {
    date: '02-18',
    status: 'P',
    count: 1222,
  },
  {
    date: '02-17',
    status: 'P',
    count: 1223,
  },
  {
    date: '02-23',
    status: 'P',
    count: 25,
  },
];

data.sort((a, b) => (a.date > b.date ? 1 : -1));

chart.data(data);

chart
  .area()
  .transform([
    { type: 'stackY' }, 
  ])
  .encode('x', 'date')
  .encode('y', 'count')
  .encode('color', 'status')
  .encode('tooltip', 'count')
  .axis('x', {
    title: '',
  })
  .axis('y', {
    tickFilter: (d) => d === Math.floor(d) || d === Math.ceil(d),
  })
  .scale('y', { zero: true })
  .encode('shape', 'smooth');

chart.render();

这个只是因为 date 为 02-23,status 为 P 的数据出现了两次,并不是一个 bug。

posted by pearmini about 2 years ago

Fund this Issue

$0.00
Funded

Pull requests