如何在 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

的柱

value > 0

这是条值 === 0

value === 0

这是所需的更改：

if value === 0

我试图以这个 post 为例：

Answer 1

要设置这些属性：

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

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

请注意，适配器必须 return 一个值。所以你应该尝试这样的事情：

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

等等

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

How to conditionally set properties on XY bar chart in amCharts v4?

javascript

reactjs

amcharts4