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的{​​{1}}使用an adapter。出现这种情况时，请检查项目符号的dy，以获取对其dataItem.bullets（用于气泡）的引用，检查其半径，然后将其用于CircleBullet。如果您希望逻辑位于dy之上或之下，也可以提供逻辑。如果值小于CircleBullet，请移至上方，否则请移至下方。

10

Here's a fork中我们的Bubble XY chart with date-based axis demo，上面的代码：

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

您可以尝试执行类似的操作，例如在// 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; }); 内放入Label（作为它的子代），修改其CircleBullet和/或valign' s CircleBullet，但是您仍然必须动态调整其contentValign，使它们位于圆的上方/下方。

希望这会有所帮助。