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;

现在，当您单击列时，它将在其活动状态和默认状态之间切换，因此您只需要创建活动状态并定义其属性。您已经通过以下两行代码做到了这一点：

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

就是这样！无需点击事件等。

如果您希望每次只突出显示一列，那么我们确实需要一个hit事件，我们将重置所有列，除了被单击的列之外（无论它们是否处于活动状态都无关紧要）。 series.columns是list template，因此它具有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

如何在amcharts v4中突出显示单击时的单个栏

1 个答案: