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

75

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?

James Hollingworth
quelle

Antworten:

111

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

Geben Sie hier die Bildbeschreibung ein

Eolsson
quelle
5
Die richtige Antwort sollte von @antonversal sein! Automatische {plotOptions: {column: {colorByPoint: true}}}Magie!
Cassiano
66

Sie können auch die Option einstellen:

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

Weitere Informationen finden Sie in den Dokumenten

antonversal
quelle
10
Dies sollte die richtige Antwort sein. Es ist unpraktisch, die Farbe jedes Balkens in der Serie manuell einzustellen.
Harryg
14

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 =)

Allen Liu
quelle
1
Hey, ich habe versucht, den obigen Code zu verwenden, aber mein gesamtes Diagramm wechselt stattdessen ohne Farbabweichung zur ersten Farbe # 058DC7. Gibt es eine Möglichkeit, die Farbvariation auf automatisch einzustellen?
Jamen
1
Sie hätten zumindest ein Säulendiagramm für die Demo verwenden können.
Farzher
Es wird nicht funktionieren, weil alle Datenpunkte in einer Reihe sind und diese Farben zum Färben in Reihe sind ...
Philw
8

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'
},
Prem Kumar Maurya
quelle
4

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']});
Thirumalaa Srinivas
quelle
2

einfach Diagramm setzen

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

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

    });
V.Ahlawat
quelle
0

Eigenschaften hinzufügen:

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

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
  }
}
Leo Rams
quelle
-1
{plotOptions: {bar: {colorByPoint: true}}}
herlambang
quelle