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

【问题标题】：Toggle column series on click of custom legends in amcharts4 in Angular在 Angular 中单击 amcharts4 中的自定义图例时切换列系列
【发布时间】：2019-06-11 16:52:19
【问题描述】：

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

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

【问题讨论】：

标签： javascript angular typescript amcharts amcharts4

【解决方案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();
          }
        }
      });

【讨论】：