时间戳

首页 > 解决方案 > 在 amcharts4 中的气泡图中的气泡下标记

javascript - 在 amcharts4 中的气泡图中的气泡下标记

问题描述

我试图弄清楚如何在 amcharts 4 中的气泡图中标记其下方的气泡，如下所示：

气泡图示例

但我没有找到任何关于它的官方信息。

如果将 LabelBullet 推到系列上，则标签以数据点为中心，然后您可以使用 dx/dy 调整它们的位置，但问题出在气泡图上，气泡相对于数据点会改变大小。

到目前为止，这是我想出的，但我希望有人可能有更官方的东西：

            const bulletLabel = series.bullets.push(new am4charts.LabelBullet());
            bulletLabel.label.text = options.bubbleLabelText;
            bulletLabel.label.paddingTop = 20;
            bulletLabel.label.fontSize = 12;
            series.heatRules.push(
                {
                    target: bulletLabel,
                    min: options.minRadius || 5,
                    max: options.maxRadius || 60,
                    property: 'dy'
                }
            );

这也仅在在气泡下方标记时有效，我想不出一种方法让它在气泡上方工作。

标签： javascriptamchartsamcharts4

解决方案

您需要为's使用适配器。当它出现时，检查子弹以获取对其的引用（用于气泡），检查其半径，然后将其用于您的. 如果您希望它高于或低于 ，您还可以提供逻辑，例如，如果值小于，则高于 ，否则低于 。LabelBulletdydataItem.bulletsCircleBulletdyCircleBullet10

// Sample data
{
  "date": "2015-01-08",
  "ay": 8,
  "by": 12.3,
  "aValue": 5,
  "bValue": 13,
  bubbleLabelText: "test"
}

const bulletLabel = series.bullets.push(new am4charts.LabelBullet());
bulletLabel.label.text = "{bubbleLabelText}";
bulletLabel.label.fontSize = 12;
bulletLabel.adapter.add('dy', (dy, bullet) => {
  let radiusDy = dy;
  bullet.dataItem.bullets.iterator()(firstBullet => {
    const circleBullet = firstBullet[1];
    if (bullet.dataItem.dataContext.bubbleLabelText) {
      radiusDy = circleBullet.circle.radius;
      if(bullet.dataItem.values.valueY.value >= 10) {
        radiusDy += 12;
      } else {
        radiusDy = -1 * radiusDy - 12;
      }
    }
  })
  return radiusDy;
});

这是我们的Bubble XY 图表的一个分支，带有基于日期的轴演示，上面的代码：

https://codepen.io/team/amcharts/pen/a86361c54a4c369e8c49bdd931f8d0f5

Label您可以尝试在内部（作为它的孩子）做类似的事情CircleBullet，修补其valign和/或CircleBullet's contentValign，但您仍然必须动态调整它们dy，使它们稍微高于/低于圆圈。

希望这可以帮助。

推荐阅读