如何在 AMCharts 4 中以编程方式突出显示列？

Question

在 AMCharts 版本 3 中，demo 展示了如何突出显示特定列。

这可以使用 AMCharts 版本 4 吗？例如，在 Simple Column demo 中，根据其值突出显示 UK 列（即，其中 country = 'UK'）。

我尝试修改 but I can't get a handle on the columns in order to assess their values and then apply the active state highlight (JSFiddle 中的示例。

// copied from  but not working yet
var activeState = series.columns.template.states.create("active");
activeState.properties.fill = am4core.color("#E94F37");

series.columns.each(function(column) {
  alert("column") // no alert is seen
  column.setState("active");
  column.isActive = true;
})

Answer 1

您可以采用两种方法。

1) 在列的 fill 和 stroke 上使用 adapter 并在修改颜色之前检查列值，例如

series.columns.template.adapter.add('fill', function(fill, target) {  
  if (target.dataItem && target.dataItem.categoryX == "UK") {
    return "#ff0000";
  }
  return fill;
});

series.columns.template.adapter.add('stroke', function(stroke, target) {  
  if (target.dataItem && target.dataItem.categoryX == "UK") {
    return "#ff0000";
  }
  return stroke;
})

Demo

2) 使用 property field 并根据您的数据设置描边和填充：

chart.data = [
  // ...
  {
    "country": "UK",
    "value": 1122,
    "color": "#ff0000"
  },
  // ...
];
// ...
series.columns.template.propertyFields.fill = "color";
series.columns.template.propertyFields.stroke = "color";

Demo

如何在 AMCharts 4 中以编程方式突出显示列？

How to highlight a column programmatically in AMCharts 4?

amcharts4