通过单击AmChart4隐藏和显示Series

时间:2018-11-18 01:33:11

标签: javascript amcharts

我正在尝试在AmChart4上实现this

通过单击图例标记仅显示一个图形。

尽管它使用clickMarker / clickLabel,但AmChart4没有这些属性。

因此我可以根据此page

获得图例点击事件
  chart.legend.itemContainers.template.events.on("hit", function(ev) {
    console.log("Clicked on", ev.target);
    console.log(chart);
  });

现在如何获取一系列图表并隐藏/显示?

1 个答案:

答案 0 :(得分:2)

您可以从ev.target.dataItem.dataContext.name获取系列名称,该名称在同一页面的下方进行了记录。您可以使用它并遍历图表系列数组,并根据需要在匹配/不匹配系列上调用show()hide(),类似于v3演示:

chart.legend.itemContainers.template.events.on("hit", function(ev) {
  var selectedSeries = ev.target.dataItem.dataContext.name;
  chart.series.values.forEach(function(series) {
    if (series.name === selectedSeries) {
      series.show();
    }
    else {
      series.hide();
    }
  })
});

Demo