Как выделить один бар на клике в amcharts v4 - PullRequest
Новая
       17

Как выделить один бар на клике в amcharts v4

0 голосов
/ 17 января 2019

У меня есть столбчатая диаграмма из amcharts. Мне нужно выделить один бар на клик на панели. Текущий сценарий - когда я нажимаю несколько баров, все бары подсвечиваются.

введите описание изображения здесь 

var highState = series.columns.template.states.create("highlight");
    highState.properties.fill = am4core.color("#8c8c8c");

var highState = series.columns.template.states.create("default");
highState.properties.fill = am4core.color("#333333");

     var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color("#E94F37");

series.columns.template.events.on("hit", function(ev) {

    for (var j = 0; j < !ev.target.isActive.length; ++j) {
    if (ev.target.isActive) { 

      series.columns.template.setState("default");
        ev.target.setState("default");
        ev.target.isActive = !ev.target.isActive;
    }
   else {
     State = undefined;
      !series.columns.template.setState("active");
        ev.target.isActive = !ev.target.isActive;
         series.columns.template.setState("highlight");         ev.target.isActive;
    State = ev.target.isActive;
   }



    }


});

1 Ответ

0 голосов
/ 25 января 2019

Чтобы выделить один столбец при нажатии, сначала сделайте столбцы переключаемыми: 

series.columns.template.togglable = true;

Теперь, когда вы щелкаете по столбцу, он переключается между активным и стандартным состояниями, поэтому вам просто нужно создать активное состояние и определить его свойства. Вы уже делаете это с этими двумя строками кода: 

var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color("#E94F37");

И это все! Нет необходимости в хитовых событиях и т. П.

Если вы хотите, чтобы за раз выделялся только один столбец, тогда нам нужно событие попадания, мы просто сбросим каждый столбец, кроме того, который был нажат (независимо от того, были они активны или нет, не имеет значения) , series.columns - это шаблон списка , поэтому у него есть метод each, который позволяет перебирать все фактические столбцы (во многом как Array.forEach): 

series.columns.template.events.on("hit", function(event) {
  series.columns.each(function(column) {
    if (column !== event.target) {
      column.setState("default");
      column.isActive = false;
    }
  })
});

Вот демоверсия:

https://codepen.io/team/amcharts/pen/abd6da81e3bd7004f70eb6069a135219

...