javascript - 当数据少于 3 个值时，未出现 AMCharts 系列的问题

Question

我在 WordPress 项目中使用 AMCharts4，一切正常，但是当我过滤数据时遇到了一个奇怪的问题，让我展示一下图像发生了什么：

• 使用所有数据（工作 100% 正常）

-过滤数据（超过 2 个结果工作正常 100%）

• 过滤数据（2个或更少的结果不显示分数，这是错误）

看看它如何没有将各自的分数显示为前 2 个图像。

这里的问题是如何让这些分数出现？我已经在我的函数中尝试了注释代码行，但似乎没有任何效果。

您可以在此链接中重现该问题，例如选择澳大利亚或巴西位置

并在这里查看我的功能

labelBullet = series.bullets.push(new am4charts.LabelBullet())
labelBullet.label.horizontalCenter = "left";
labelBullet.label.dx = 10;
labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.')}";
labelBullet.locationX = 1;

标签： javascriptjqueryamcharts

Answer 1

问题在于您对labelBullet.locationX = 1;. 如果您查看am4 Bullets 文档：

不过，有一个警告。对于项目符号，locationY 属性表示在列的整个高度中的相对垂直位置。这意味着如果我们的比例不是从零开始，它就不会位于列当前可见部分的直接中心。

当您使用倒置图表时，同样适用locationX于您的情况。意思是，标签位置是相对于比例的。

要解决此问题，您可以将min值轴设置为 0，如在此jsfiddle中使用：

valueAxis.min = 0;

或者如文档中所述，将标签直接推送到列系列模板中，如jsfiddle中所示。

label = series.columns.template.createChild(am4core.Label);
label.text = "{values.valueX.workingValue.formatNumber('#.')}";
label.align = "left";
label.valign = "middle";
label.zIndex = 2;