Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/386.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 如何在amCharts v4中有条件地设置XY条形图的属性?_Javascript_Reactjs_Amcharts4 - Fatal编程技术网

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

Javascript 如何在amCharts v4中有条件地设置XY条形图的属性?,javascript,reactjs,amcharts4,Javascript,Reactjs,Amcharts4,您好,我想格式化我的XY条形图,这样,如果数据值为0,它将显示位于外部图表前部的条形图,而不是在条形图中心显示该值的bulletLabel 我想将这些属性应用于项目符号标签: labelBullet.label.horizontalCenter = 'left'; labelBullet.locationX = 0; labelBullet.label.truncate = false; labelBullet.label.hideOversized = false; 我曾想过使用适配器,但我

您好,我想格式化我的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的条

这是期望的变化:

我试图以这篇文章为例:

  • (扩展了项目符号)

要设置这些属性,请执行以下操作:

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