antvis/G2

[v5] 实现带 point 的堆叠折线图 #4515

visiky posted onGitHub

期望效果

<img width="400" alt="image" src="https://user-images.githubusercontent.com/15646325/209423419-d1253b30-3908-43b9-98c0-455f4b1f7557.png">

代码

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

const chart = new Chart({
  container: 'container',
  height: 380
});

chart.data({
  type: "fetch",
  value:
    "https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json"
})

chart
  .line()
  .encode('x', d => new Date(d.year))
  .encode('y', 'value')
  .encode('color', 'category')
  .transform({ type: 'stackY' })

chart
  .point()
  .encode('x', d => new Date(d.year))
  .encode('y', 'value')
  .encode('color', 'category')
  .transform({ type: 'stackY' })

chart.render();

实际效果

<img width="400" alt="image" src="https://user-images.githubusercontent.com/15646325/209423890-b129cef7-b222-41a9-a004-169d15285861.png">


这里散点图支持 y y1 的方式去设置位置??

这个是为了点分箱图:https://g2.antv.antgroup.com/examples/analysis/bin/#bin-size

解决这个问题可以如下设置:指定 y1 通道的值。 <img src="https://github.com/antvis/G2/assets/49330279/acff3665-e329-4e8a-b42a-ffb496c6a87b" width=640 />

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

const chart = new Chart({
  container: 'container',
  height: 380,
  theme:'classic'
});

chart.data({
  type: "fetch",
  value:
    "https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json"
})

chart
  .line()
  .encode('x', d => new Date(d.year))
  .encode('y', 'value')
  .encode('color', 'category')
  .transform({ type: 'stackY' })

chart
  .point()
  .encode('x', d => new Date(d.year))
  .encode('y', 'value')
  .encode('color', 'category')
  .transform({ type: 'stackY', y1: 'y' }) // 指定 y1 为 y

chart.render();
posted by pearmini almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests