在amcharts 4中选择单列

Question

如何突出显示单个列并取消选择amCharts 4柱形图中以前突出显示的列？

我想在突出显示目标列的颜色之前更改所有列的颜色，但它无法正常工作。

series.columns.template.events.on("hit", function(ev) {
    ev.target.fill = am4core.color("red");
    chart.invalidate();
});

JsFiddle

Answer 1

您可以使用active状态：

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

在hit事件中，您现在可以将列设置为活动状态。如果缓存最后选择的列，则可以在将新列设置为活动之前重置active状态：

var currentActive;
series.columns.template.events.on("hit", function(ev) {
  if (currentActive) {
    currentActive.isActive = false;
  }
  currentActive = ev.target;
  currentActive.isActive = true;
});

如果您不想缓存最后一个选择，则可以在设置新列之前停用所有列：

series.columns.template.events.on("hit", function(ev) {
  series.columns.values.forEach(c => c.isActive = false);
  ev.target.isActive = true;
});

如果您希望能够再次取消选择所有列，可以使用第二种方法并将其扩展一下：

series.columns.template.events.on("hit", function(ev) {
  series.columns.values
    .filter(c => c !== ev.target)
    .forEach(c => c.isActive = false);
  ev.target.isActive = !ev.target.isActive;
});

Here是显示最后行为的代码笔。您只需要替换最后一位以使用其他选项。