如何在amCharts v4中有条件地设置XY条形图的属性

Question

嗨，我想格式化我的XY条形图，这样，如果数据值为0，则不会在条形图的中心显示该值的bulletLabel，而是将其显示在外部图表的前面。

我想将这些属性应用于项目符号标签：

labelBullet.label.horizontalCenter = 'left';
labelBullet.locationX = 0;
labelBullet.label.truncate = false;
labelBullet.label.hideOversized = false;

我曾想过使用适配器，但我不确定如何编写。以下是我可悲的尝试：

labelBullet.label.adapter.add('label', function (value, target) {
if (!target.dataItem) {
return value;
}
var values = target.dataItem.values;
if (values.valueY.value === 0) {
labelBullet.label.horizontalCenter = 'left';
labelBullet.locationX = 0;
labelBullet.label.truncate = false;
labelBullet.label.hideOversized = false;
}
});

如果数据点值为0，我不知道如何检查数据值或告诉它我想应用这些属性。

这是我的系列创作者：

let series = chart.series.push(new am4charts.ColumnSeries());
series.name = id[0].toUpperCase() + `${id}`.slice(1);
series.dataFields.valueX = field;
series.dataFields.categoryY = 'school';
series.sequencedInterpolation = true;
series.columns.template.height = am4core.percent(30);
series.columns.template.tooltipText = '{categoryY}n {name}: [bold]{valueX}[/]';
let labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.locationX = 0.5;
labelBullet.label.text = '{valueX}';
labelBullet.label.fill = am4core.color('#fff');
labelBullet.label.hideOversized = true;

以下是数据示例：

[
{
school: "Fort Lewis College",
totalInBaseField: "33"
},
{
school: "Adams State University",
totalInBaseField: "0"
}
{
school: "University of Colorado Colorado Springs",
totalInBaseField: "141"
}
]

结果应该是这样的：这是一个值为>0

值>0

这是数值为===0 的条形图

值===0

这是想要的改变：

如果值===0

我试着以这篇文章为例：如何在amCharts v4中有条件地设置饼图切片的颜色和渐变？

Answer 1

• 子弹头适配器

• LabelBullet(扩展Bullet(的适配器

• 标签适配器

要设置这些属性：

labelBullet.label.horizontalCenter = 'left';
labelBullet.locationX = 0;
labelBullet.label.truncate = false;
labelBullet.label.hideOversized = false;

您应该为每个属性尝试一个适配器。

请注意，适配器必须返回一个值。所以你应该试试这样的东西：

labelBullet.label.adapter.add('horizontalCenter', function(x, target) {
if(!target.dataItem) {
return x;
}
var values = target.dataItem.values;
if(values.valueY.value === 0) {
return 'left';
} else {
return 'right';
}
});
labelBullet.adapter.add('locationX', function(x, target) {
if(!target.dataItem) {
return x;
}
var values = target.dataItem.values;
if(values.valueY.value === 0) {
return 0;
} else {
return SomethingElse;
}
});
labelBullet.label.adapter.add('truncate', function(x, target) {
if(!target.dataItem) {
return x;
}
var values = target.dataItem.values;
if(values.valueY.value === 0) {
return false;
} else {
return true;
}
});

等等。