web-dev-qa-db-fra.com

Comment modifiez-vous la couleur de chaque catégorie dans un histogramme à colonnes en haut?

J'ai un graphique en 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?

highcharts
67
James Hollingworth

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

enter image description here

100
eolsson

Aussi, vous pouvez définir l'option:

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

pour plus d'informations, lisez docs

58
antonversal

Ajoutez les couleurs que vous souhaitez colors, puis définissez colorByPoint sur true.

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

plotOptions: {
    column: {
        colorByPoint: true
    }
}

démo

Référence:

25
Ricardo Alvaro Lohmann

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 diagramme à secteurs, mais vous pouvez simplement remplir la série avec toutes les couleurs qui vous conviennent le contenu =)

13
Allen Liu

Vous pouvez ajouter un tableau de couleurs dans le graphique de graphique supérieur pour modifier la couleur du graphique. Vous pouvez réorganiser ces couleurs et vous pouvez également spécifier vos propres couleurs.

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
7
Prem Kumar Maurya

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']});
4
thirumalaa srinivas

Ajoutez simplement ceci ... ou vous pouvez changer les couleurs selon votre demande.

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }

    });
1
V.Ahlawat

il suffit de mettre le tableau

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart
1
pradip kor

ajouter des propriétés:

 colors: ['Red', 'Bule', 'Yellow']
0
Tran Anh Hien

Cela a fonctionné pour moi. Il est fastidieux de définir toutes les options de couleur pour une série, surtout si elle est dynamique

plotOptions: {
  column: {
   colorByPoint: true
  }
}
0
Leo Rams