Как условно установить свойства на гистограмме XY в amCharts v4? - PullRequest
Новая
       70

Как условно установить свойства на гистограмме XY в amCharts v4?

0 голосов
/ 07 августа 2020

Привет, я хотел бы отформатировать свою столбчатую диаграмму 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

Это желаемое изменение:

if value === 0

Я пытался следовать этому сообщению в качестве примера: Как условно установить цвета и сделать градиент p ie срезы графика в amCharts v4?

1 Ответ

1 голос
/ 07 августа 2020

Чтобы установить эти свойства: 

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

et c.

...