antvis/G2

[v5] 面积图支持 step 等 shape #4516

visiky posted onGitHub

需求背景

用户在设置 line 为 hvh shape 的时候,发现 area 填充不能跟随一样实现 hvh 形状

<img width="345" alt="image" src="https://user-images.githubusercontent.com/15646325/209425224-50cd7709-b17d-47fa-8da3-13422523eb80.png">

代码

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

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

chart.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 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
])

chart
  .line()
  .encode('x', 'year')
  .encode('y', 'value')
  .encode('shape', 'hvh')


chart
  .area()
  .encode('x', 'year')
  .encode('y', 'value')
  .style('fillOpacity', 0.25)
  // .encode('shape', 'hvh')

chart.render();

.encode('shape', 'step')

面积图没有和折线图一样区分 vh hv hvh。面积图的 step 等效于 hvh。

posted by hustcc over 2 years ago

Fund this Issue

$0.00
Funded

Pull requests