javascript - 在 Angular 中单击 amcharts4 中的自定义图例时切换列系列

Question

这是我的 Angular 应用程序与 amchart 的 stackblitz 链接。 Amchart Angular 应用程序

出于用户体验的原因，我保持图表堆栈颜色相同。现在在代码中，如果我使用 amcharts 默认图例（代码的第 225 行），一切正常。在单击图例时，它会相应地过滤堆栈图，但再次出于 UX 原因，我使用自定义项作为图例（代码中的第 227 到 235 行），在这里，当我单击图例时，堆栈列没有得到相应的过滤。这种场景下如何实现amchart的默认图例行为？

Answer 1

我想通了，在我的代码中添加了以下更改，我达到了预期的结果：

legend.itemContainers.template.clickable = true;

      legend.itemContainers.template.togglable = false;

      legend.itemContainers.template.events.on('hit', (ev) => {
        // console.log(ev);
        if (ev.target.dataItem.dataContext['name'] === 'Success') {
          series2.hide();
          series3.hide();
        }
        if (ev.target.dataItem.dataContext['name'] === 'Failed') {
          series1.hide();
          series3.hide();
        }
        if (ev.target.dataItem.dataContext['name'] === 'Progress') {
          series1.hide();
          series2.hide();
        }
        if (ev.target.dataItem.dataContext['name'] === 'All') {
          if (series1.isHidden) {
            series1.show();
          }
          if (series2.isHidden) {
            series2.show();
          }
          if (series3.isHidden) {
            series3.show();
          }
        }
      });