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是显示最后行为的代码笔。您只需替换最后一位即可使用其他选项。

在amcharts 4中选择单列

1 个答案: