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

Select amcharts 4 中的单列

Select single column in amcharts 4

javascript

amcharts