如何在 amcharts v4 中单击时突出显示单个条形图

Question

我有一个来自amcharts的柱形图。我需要在单击栏时突出显示单个栏。当前的情况是当我单击多个条形图时，所有条形图都会突出显示。

在此处输入图像描述

var highState = series.columns.template.states.create("highlight");
    highState.properties.fill = am4core.color("#8c8c8c");
var highState = series.columns.template.states.create("default");
highState.properties.fill = am4core.color("#333333");
     var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color("#E94F37");
series.columns.template.events.on("hit", function(ev) {
    for (var j = 0; j < !ev.target.isActive.length; ++j) {
    if (ev.target.isActive) { 
      series.columns.template.setState("default");
        ev.target.setState("default");
        ev.target.isActive = !ev.target.isActive;
    }
   else {
     State = undefined;
      !series.columns.template.setState("active");
        ev.target.isActive = !ev.target.isActive;
         series.columns.template.setState("highlight");         ev.target.isActive;
    State = ev.target.isActive;
   }

    }

});

Answer 1

要在单击时突出显示单个列，请先使列可切换：

series.columns.template.togglable = true;

现在，当您单击一列时，它将在其活动状态和默认状态之间切换，因此您只需创建活动状态并定义其属性。您已经使用以下 2 行代码执行此操作：

var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color("#E94F37");

就是这样！不需要命中事件等。

如果您希望一次只突出显示一列，那么我们确实需要一个命中事件，我们将重置除单击的列之外的每一列（它们是否处于活动状态无关紧要）。series.columns是一个列表模板，因此它有一个each方法，允许我们遍历所有实际的列（很像Array.forEach）：

series.columns.template.events.on("hit", function(event) {
  series.columns.each(function(column) {
    if (column !== event.target) {
      column.setState("default");
      column.isActive = false;
    }
  })
});

下面是一个演示：

https://codepen.io/team/amcharts/pen/abd6da81e3bd7004f70eb6069a135219