Dans AMCharts version 3, il existe une démo montrant comment mettre en évidence une colonne particulière.

Est-ce possible avec AMCharts version 4 ? Par exemple, dans la démo de colonne simple, mettez en surbrillance la colonne UK en fonction de son valeur (c'est-à-dire, où country = 'UK').

J'ai essayé de modifier l'exemple sur https://stackoverflow.com/a/54358490/906814 mais je n'arrive pas à obtenir un manipuler les colonnes afin d'évaluer leurs valeurs puis appliquer la surbrillance de l'état actif (JSFiddle ).

// copied from https://stackoverflow.com/a/54358490/906814 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;
})
0
Stephen Lead 22 janv. 2020 à 08:20

1 réponse

Meilleure réponse

Vous pouvez adopter deux approches.

1) Utilisez un adaptateur sur les colonnes fill et stroke et vérifiez la valeur de la colonne avant de modifier la couleur, par exemple

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;
})

Démo

2) Utilisez un champ de propriété et définissez le trait et le remplissage à partir de vos données:

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

Démo

1
xorspark 23 janv. 2020 à 02:09