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

Question

我试图弄清楚如何在 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'
                }
            );

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

Answer 1

您需要为 LabelBullet 的 dy 使用 an adapter。当它出现时，检查子弹的 dataItem.bullets 以获取对其 CircleBullet 的引用（用于气泡），检查其半径，然后将其用于 dy。如果您希望它高于或低于 CircleBullet，您也可以提供逻辑，例如如果值小于 10，则转到上面，否则转到下面。

// 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;
});

Here's a fork of our Bubble XY chart with date-based axis demo 加上上面的代码：

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

你可以尝试做一些类似的事情，在 CircleBullet 中有一个 Label（作为它的子项），修补它的 valign and/or CircleBullet 的 contentValign，但您仍然需要动态调整它们的 dy，以便它们绕 above/below 圈。

希望对您有所帮助。

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

Labeling under a bubble in a bubble chart in amcharts4

javascript

amcharts

amcharts4