web-dev-qa-db-fra.com

Étiquettes de texte Highcharts pour l'axe Y

J'utilise Highcharts et je voudrais afficher un graphique à colonnes simple, mais au lieu d'utiliser des valeurs numériques pour l'axe des y, je voudrais utiliser des valeurs de texte.
Par exemple, au lieu de [0,5,10,15,20] Je voudrais utiliser [Very Low,Low,Medium,High,Very High].

J'ai remarqué qu'il est quelque peu possible de le faire avec des bandes de tracé, mais cela montre toujours les étiquettes numériques de l'axe y et met juste le texte à côté d'eux. Je souhaite afficher uniquement les étiquettes de texte.

25
Wesley Tansey

Vous pouvez changer les étiquettes en utilisant un formateur d'étiquettes . En supposant que vos données sont correctement formées, vous pouvez faire quelque chose comme ceci:

var yourLabels = ["Very Low", "Low", "Medium", "High", "Very High"];
var yourChart = new Highcharts.Chart({
    //...
    yAxis: {        
        labels: {
            formatter: function() {
                return yourLabels[this.value];
            }
        }
    }
    //...
});
46
NT3RP

Déclarez un objet qui sera utilisé pour changer les valeurs que vous souhaitez modifier, comme suit.

var change = {
    0: 'Very Low',
    5: 'Low',
    10: 'Medium',
    15: 'High',
    20: 'Very High'
};

Ensuite, sur vos options de graphique, utilisez le formateur d'étiquettes pour le basculer.

yAxis: {
    labels: {
        formatter: function() {
            var value = change[this.value];
            return value !== 'undefined' ? value : this.value;
        }
    }
}
12