Comment modifiez-vous la couleur de chaque catégorie dans un diagramme à colonnes de tableaux à colonnes?

Question

J'ai un graphique à colonnes qui comporte un certain nombre de catégories, chacune avec un seul point de données (par exemple, comme celui-ci ). Est-il possible de changer la couleur de la barre pour chaque catégorie? c’est-à-dire que chaque barre aurait sa propre couleur plutôt que le bleu?

Answer 1

Vous pouvez également définir la couleur individuellement pour chaque point / barre si vous modifiez le tableau de données en objets de configuration au lieu de nombres.

 data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue
 

Exemple sur jsfiddle

Answer 2

Aussi, vous pouvez définir l'option:

   {plotOptions: {column: {colorByPoint: true}}}
 

pour plus d'informations, lisez la documentation

Answer 3

Ajouter les couleurs que vous souhaitez colors puis définissez colorByPoint de true.

colors: [
'#4572A7', 
'#AA4643', 
'#89A54E', 
'#80699B', 
'#3D96AE', 
'#DB843D', 
'#92A8CD', 
'#A47D7C', 
'#B5CA92'
],

plotOptions: {
    column: {
        colorByPoint: true
    }
}

démo

Référence:

• http://api.highcharts.com/highstock#colors
• http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

Answer 4

Oui, voici un exemple dans jsfiddle: http://jsfiddle.net/bfQeJ/

 Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
 

L'exemple est un graphique à secteurs, mais vous pouvez simplement remplir la série avec toutes les couleurs au contenu de votre coeur =)

Answer 5

Comme mentionné par antonversal, la lecture des couleurs et l'utilisation de l'option couleurs lors de la création de l'objet graphique fonctionnent.

 var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});