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

Question

这是我的 Angular 应用程序与 amchart 的堆栈闪电战 link。 Amchart Angular app

出于用户体验的原因，我保持图表堆栈颜色相同。现在在代码中，如果我使用 amcharts 默认图例（代码第 225 行），一切正常。单击图例时，它会相应地过滤堆栈图，但再次出于用户体验的原因，我 对图例使用自定义项 （代码中的第 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();
          }
        }
      });

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

Toggle column series on click of custom legends in amcharts4 in Angular

javascript

amcharts

typescript

angular

amcharts4