Как мы можем использовать легенды в качестве фильтров в AmCharts4? - PullRequest
Новая
       8

Как мы можем использовать легенды в качестве фильтров в AmCharts4?

0 голосов
/ 14 февраля 2020

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

  1. Не скрывать серии, по которым щелкнули.
  2. Скрыть все остальные серии, кроме той, по которой щелкнули, чтобы отображать только seires, легенда которых была нажата.

Этот вопрос находится на обороте старого вопроса , предназначенного для amcharts3. Однако, поскольку v4 значительно отличается от v3, ответ не работает.

Исходя из документации здесь , похоже, что ниже должно работать: 

series1.events.on("hidden", function() {
  series2.hide();
  series3.hide();
// but when I run series1.show() in order to mimic series1 to not hide, I get a max call size exceeded msg
});

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

Спасибо.

Обновление : продолжение доступно на GitHub . Публикация обновления здесь для полноты картины.

@ zeroin 's ответ работает отлично. Мне просто нужно было немного изменить его, чтобы он работал для сценария ниже.

Как мне снова включить все серии? На строящемся графике у меня есть серия 'allTraffi c' и несколько других серий.

  1. AllTraffi c никогда не должен быть скрыт.
  2. Когда я нажимаю на любую другую серию, кроме AllTraffi c, скрываю другую серию, кроме AllTraffi c и серии, легенда которой была нажата.

  3. Сбросить все (вернуть все серии) при нажатии на легенду AllTraffi c.

    chart.legend.itemContainers.template.togglable = false; 

        chart.legend.itemContainers.template.events.on("hit", function(event) {
        var target = event.target;

        chart.legend.itemContainers.each(function(item) {

            if (target.dataItem.dataContext.name != 'All traffic' && item.dataItem.dataContext.name != 'All traffic') {
                console.log("clicked other: ", target.dataItem.dataContext.name);
                item.isActive = true;
                item.dataItem.dataContext.hide();
            } 
            if (target.dataItem.dataContext.name == 'All traffic') {
                console.log("Clicked all traffic");
                item.isActive = false;
                item.dataItem.dataContext.show();
            }
        });
        target.isActive = false;
        target.dataItem.dataContext.show();
    })

1 Ответ

2 голосов
/ 17 февраля 2020

Вот как вы это делаете: https://codepen.io/team/amcharts/pen/285b315ff30a2740fdbf72f27230711c

Чтобы избежать ТА, вам нужно сделать так, чтобы itemContainers не переключался: 

chart.legend.itemContainers.template.togglable = false;

chart.legend.itemContainers.template.events.on("hit", function(event){
    var target = event.target;

    chart.legend.itemContainers.each(function(item){
        if(item != target){
            item.isActive = true;
            item.dataItem.dataContext.hide();
        }
    })
    target.isActive = false;
    target.dataItem.dataContext.show();
})
...