Wie ändern Sie die Farbe jeder Kategorie in einem Highcharts-Säulendiagramm?

Ich habe ein Säulendiagramm, das eine Reihe von Kategorien mit jeweils einem Datenpunkt enthält (z. B. wie dieser ). Ist es möglich, die Farbe des Balkens für jede Kategorie zu ändern? dh also hätte jeder Balken seine eigene Farbe, anstatt dass alle blau wären?

Sie können die Farbe auch für jeden Punkt / Balken einzeln festlegen, wenn Sie das Datenarray so ändern, dass es Konfigurationsobjekte anstelle von Zahlen ist.

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

Beispiel auf jsfiddle

Sie können auch die Option einstellen:

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

Weitere Informationen finden Sie in den Dokumenten

Fügen Sie die gewünschten Farben hinzu colorsund stellen Sie colorByPointsie ein true.

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

plotOptions: {
    column: {
        colorByPoint: true
    }
}

Demo

Referenz:

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

Ja, hier ist ein Beispiel in jsfiddle: http://jsfiddle.net/bfQeJ/

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

Das Beispiel ist ein Kreisdiagramm, aber Sie können die Serie einfach nach Herzenslust mit allen Farben füllen =)

Sie können ein Farbarray in einem Diagramm mit hohem Diagramm hinzufügen, um die Farbe des Diagramms zu ändern. Sie können diese Farben neu anordnen und auch Ihre eigenen Farben angeben.

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

Wie von antonversal erwähnt, funktioniert das Lesen der Farben und die Verwendung der Farboption beim Erstellen des Diagrammobjekts.

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

einfach Diagramm setzen

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

Fügen Sie einfach dies hinzu ... oder Sie können die Farben nach Ihren Wünschen ändern.

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

    });

Eigenschaften hinzufügen:

 colors: ['Red', 'Bule', 'Yellow']

Das hat bei mir funktioniert. Es ist mühsam, alle Farboptionen für eine Serie festzulegen, insbesondere wenn sie dynamisch ist

plotOptions: {
  column: {
   colorByPoint: true
  }
}

{plotOptions: {bar: {colorByPoint: true}}}