Как программно выделить колонку в AMCharts 4? - PullRequest
Новая
       5

Как программно выделить колонку в AMCharts 4?

0 голосов
/ 22 января 2020

В AMCharts версии 3 имеется демо , показывающее, как выделить определенный столбец.

Возможно ли это с помощью AMCharts версии 4? Например, в демонстрационной версии Simple Column выделите столбец UK на основе его значения (ie, где country = 'UK').

Я попытался изменить пример на { ссылка } но я не могу получить указатель на столбцы, чтобы оценить их значения и затем применить выделение активного состояния ( JSFiddle ). 

// copied from https://stackoverflow.com/a/54358490/906814 but not working yet
var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color("#E94F37");

series.columns.each(function(column) {
  alert("column") // no alert is seen
  column.setState("active");
  column.isActive = true;
})

1 Ответ

1 голос
/ 23 января 2020

Существует два подхода.

1) Используйте адаптер для столбцов fill и stroke и проверьте значение столбца перед изменением цвета, например 

series.columns.template.adapter.add('fill', function(fill, target) {  
  if (target.dataItem && target.dataItem.categoryX == "UK") {
    return "#ff0000";
  }
  return fill;
});

series.columns.template.adapter.add('stroke', function(stroke, target) {  
  if (target.dataItem && target.dataItem.categoryX == "UK") {
    return "#ff0000";
  }
  return stroke;
})

Демо

2) Используйте поле свойства и установите обводку и заливку на основе ваших данных: 

chart.data = [
  // ...
  {
    "country": "UK",
    "value": 1122,
    "color": "#ff0000"
  },
  // ...
];
// ...
series.columns.template.propertyFields.fill = "color";
series.columns.template.propertyFields.stroke = "color";

Демо

...