antvis / F2

📱📈An elegant, interactive and flexible charting library for mobile.
https://f2.antv.vision/zh
MIT License
7.89k stars 649 forks source link

【堆叠柱形图】如何获取每个柱子的最上方的位置,目前只能取到points,也就是按照分组柱形图的柱形位置 #1955

Closed ryanuo closed 5 months ago

ryanuo commented 5 months ago

What problem does this feature solve?

要在柱形图 每个堆叠图柱形图上方加label,使用了自定义Guide组件 ,目前在获取最顶部坐标时遇到问题了

What does the proposed API look like?

【堆叠柱形图】如何获取每个柱子的最上方的位置,目前只能取到points,也就是按照分组柱形图的柱形位置 如何获取堆叠图累加的最上方的实际坐标

ryanuo commented 5 months ago

@simaQ 帮忙解答下 谢谢

image

这个坐标明显就是分组的柱状图坐标,如何拿最上层的坐标

ryanuo commented 5 months ago
  const { points, records, chart } = props;
  const figureHeight = chart.getLayout()?.height;

  const pointsMap: Record<number, PointListItem> = {};

  points.forEach((item, index) => {
    const { x, y } = item;
    if (!pointsMap[x]) {
      pointsMap[x] = {
        x,
        y: 0,
        record: records[index],
      };
    }
    pointsMap[x].y += figureHeight - y;
  });

已解决,计算出每个堆叠柱子在图标中的高度,使用图表getLayout height再减去累加的柱状高度;