在图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。如果缓存最后选定的列，则可以在将新列设置为active之前重置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;
});

这里是显示最后一种行为的代码笔。你只需要替换最后一点就可以使用其他选项了。