Javascript 如何在AMCHART4中将图例用作过滤器?
目前,在amchart4中,图例可用于在单击时显示/隐藏目标系列。我希望在点击图例时:Javascript 如何在AMCHART4中将图例用作过滤器?,javascript,amcharts,amcharts4,Javascript,Amcharts,Amcharts4,目前,在amchart4中,图例可用于在单击时显示/隐藏目标系列。我希望在点击图例时: 不要隐藏单击的序列 隐藏除单击的序列之外的所有其他序列,以便仅显示其图例被单击的序列 这个问题位于目标图表3的背面。但是,由于v4与v3有很大的不同,所以答案不起作用 根据文件,以下各项似乎可以发挥作用: series1.events.on("hidden", function() { series2.hide(); series3.hide(); // but when I run series1.
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
});
除此之外,根据,可以直接禁用图例上的切换-但它在购物车级别工作,而不是在系列级别工作
谢谢
更新:可在上获得后续信息。为了完整起见,在此处发布更新 @zeroin的答案非常有效。我只是需要对它进行更多的修改,使它能够在下面的场景中工作 如何重新启用所有系列?在我正在构建的图表中,我 拥有一个名为“allTraffic”的系列和多个其他系列
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();
})
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();
})
以下是您的操作方法:
为了避免出现这种情况,您需要使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();
})