我们如何在 AmCharts4 中使用图例作为过滤器？

Question

目前，在amchart4中，图例可用于在点击时显示/隐藏目标系列。我想要点击图例时的行为：

不隐藏点击的系列。
隐藏除被单击的系列之外的所有其他系列，以便仅显示其图例被单击的系列。

这个问题是针对 amcharts3 的 older question 的。但是，由于 v4 与 v3 有很大不同，因此答案无效。

根据文档 here，以下内容似乎应该有效：

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

此外，根据 this，可以完全禁用图例上的切换 - 但它在购物车级别起作用，而不是在系列级别起作用。

谢谢。

更新：可在 GitHub 上进行跟进。为了完整起见，在此发布更新。

@zeroin 的回答非常有效。我只需要对其进行更多修改，使其适用于以下场景。

How do I re-enable all the series again? In the graph I'm building, I have a series called 'allTraffic' and multiple other series.

AllTraffic 不应该被隐藏。
当我点击除AllTraffic之外的任何其他系列时，隐藏除AllTraffic之外的其他系列以及其图例被点击的系列。

单击 AllTraffic 的图例时重置所有内容（恢复所有系列）。

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

Answer 1

这是您的操作方法： https://codepen.io/team/amcharts/pen/285b315ff30a2740fdbf72f27230711c

为避免 SO，您需要使项目容器不可切换：

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

我们如何在 AmCharts4 中使用图例作为过滤器？

How can we use legends as filters in AmCharts4?

javascript

amcharts

amcharts4