我们如何将图例用作AmCharts4中的过滤器? [英] How can we use legends as filters in AmCharts4?

问题描述

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

Currently, in amchart4, the legends can be used to show / hide the target series on click. I would like the behaviour wherein on clicking on the legend:

1. 请勿隐藏点击的系列.
2. 隐藏除单击的系列以外的所有其他系列，以仅显示单击了其图例的系列.

该问题位于针对amcharts的旧问题的背面.但是，由于v4与v3明显不同，因此答案不起作用.

This question is on the back of an older question targetting amcharts3. However, since v4 is significantly different from v3, the answer does not work.

基于文档

Based on the documentation here, it appears that the below should work:

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

根据 ，可以完全禁用图例上的切换-但它可以在购物车级别而不是系列级别使用.

Further to that, according to this, one can outright disable the toggle on the legends - but it works at the cart level and not at the series level.

谢谢.

更新:可以在 GitHub 上进行跟进.为了完整起见，在此处发布更新.

Update: Follow up is available on GitHub. Posting the update here for the sake of completeness.

@zeroin的答案非常有效.我只是需要对其进行一些修改才能使其在以下情况下正常工作.

@zeroin 's answer works perfectly. I just needed it to be modified a bit more to have it working for the below scenario.

如何重新启用所有系列?在我正在建立的图形中，我 有一个名为"allTraffic"的系列以及其他多个系列.

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.

1. AllTraffic永远不会被隐藏.
2. 当我单击AllTraffic以外的任何其他系列时，请隐藏AllTraffic和已单击其图例的系列之外的其他系列.

3. 当单击AllTraffic的图例时，重置所有内容(恢复所有系列).

1. AllTraffic should never get hidden.
2. When I click on any of the other series apart from AllTraffic, hide the other series apart from AllTraffic and the series whose legend has been clicked.

3. Reset everything (bring back all the series) when AllTraffic's legend is clicked.

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

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

推荐答案

操作方法如下: https://codepen.io/team/amcharts/pen/285b315ff30a2740fdbf72f27230711c

为避免SO，您需要使itemContainers不可切换:

To avoid SO you need to make itemContainers not togglable:

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中的过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！