Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/mercurial/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在AMCHART4中气泡图中气泡下的标签_Javascript_Amcharts_Amcharts4 - Fatal编程技术网

Javascript 在AMCHART4中气泡图中气泡下的标签

Javascript 在AMCHART4中气泡图中气泡下的标签,javascript,amcharts,amcharts4,Javascript,Amcharts,Amcharts4,我试图找出如何在amcharts 4中的气泡图中标记其下方的气泡,如下图所示: 但我找不到任何官方消息 如果将LabelBullet推到序列上,则标签位于数据点的中心,然后可以使用dx/dy调整其位置,但问题是在气泡图上,气泡相对于数据点的大小会发生变化 到目前为止,我已经想到了这一点,但我希望有人能有更正式的东西: const bulletlab=series.bullets.push(新的am4charts.LabelBullet()); bulletLabel.label.text=op

我试图找出如何在amcharts 4中的气泡图中标记其下方的气泡,如下图所示:

但我找不到任何官方消息

如果将LabelBullet推到序列上,则标签位于数据点的中心,然后可以使用dx/dy调整其位置,但问题是在气泡图上,气泡相对于数据点的大小会发生变化

到目前为止,我已经想到了这一点,但我希望有人能有更正式的东西:

const bulletlab=series.bullets.push(新的am4charts.LabelBullet());
bulletLabel.label.text=options.bubbleLabelText;
bulletLabel.label.paddingTop=20;
bulletLabel.label.fontSize=12;
series.heatRules.push(
{
目标:bulletLabel,
最小:options.minRadius | | 5,
max:options.maxRadius | | 60,
属性:“dy”
}
);
这也只适用于在气泡下方添加标签的情况,我想不出一种方法使其在气泡上方工作。

您需要将其用于
LabelBullet
dy
。当它出现时,检查项目符号的
数据项。项目符号
要获取对其
圆形bullet
(用于气泡)的引用,请检查其半径,然后将其用于您的
dy
。如果您希望它位于
圆圈按钮上方或下方,也可以提供逻辑,例如,如果值小于
10
,请位于上方,否则位于下方

//示例数据
{
“日期”:“2015-01-08”,
“ay”:8,
“by”:12.3,
“aValue”:5,
“b价值”:13,
bubbleLabelText:“测试”
}
常量bulletLabel=series.bullets.push(新的am4charts.LabelBullet());
bulletLabel.label.text=“{bubbleLabelText}”;
bulletLabel.label.fontSize=12;
bulletLabel.adapter.add('dy',(dy,bullet)=>{
设半径y=dy;
bullet.dataItem.bullets.iterator()(firstBullet=>{
const circleBullet=firstBullet[1];
if(bullet.dataItem.dataContext.bubbleLabelText){
半径Y=圆球。圆。半径;
如果(bullet.dataItem.values.valueY.value>=10){
半径y+=12;
}否则{
半径Y=-1*半径Y-12;
}
}
})
回归半径;
});
使用上述代码的客户:

你可以尝试做一些类似的事情,比如在
圆圈内有一个
标签
(作为它的孩子),修补它的
valign
和/或
圆圈的
contentValign
,但是你仍然需要动态地调整它们的
dy
,使它们稍微高于/低于圆圈


希望这有帮助。

太棒了,谢谢你的回复!我从来没有想过这个解决方案,我想我必须习惯更多适配器的想法。@ShaneTheKing不客气!是的,adapters,
ListTemplate
s,v4中有大量新的、功能强大的介绍。很多时候,有多种方式做事情。例如,加热规则基本上是适配器的方便工具!