Vraag Hoe verander je de kleur van elke categorie in een highcharts kolomdiagram?


Ik heb een kolomdiagram met een aantal categorieën, elk met één gegevenspunt (bijv. zoals deze). Is het mogelijk om de kleur van de balk voor elke categorie te wijzigen? d.w.z. zodat elke staaf zijn eigen unieke kleur zou hebben in plaats van dat alles blauw is?


60
2017-09-14 09:46


oorsprong


antwoorden:


U kunt de kleur ook afzonderlijk instellen voor elk punt / bar als u de gegevensarray wijzigt in configuratieobjecten in plaats van getallen.

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

Voorbeeld op jsfiddle

enter image description here


91
2017-09-14 11:42



U kunt ook een optie instellen:

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

voor meer informatie lees docs


55
2018-03-15 15:18



Voeg toe welke kleuren u wilt colors en stel dan in colorByPoint naar true.

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

plotOptions: {
    column: {
        colorByPoint: true
    }
}

demonstratie

Referentie:


21
2018-02-14 02:36



Ja, hier is een voorbeeld in jsfiddle: http://jsfiddle.net/bfQeJ/

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

Het voorbeeld is een cirkeldiagram, maar je kunt de serie gewoon vullen met alle kleuren naar hartenlust =)


13
2017-09-14 09:50



U kunt kleurenarray toevoegen aan een hoge grafiek om de kleur van de grafiek te wijzigen. U kunt deze kleuren opnieuw rangschikken en u kunt ook uw eigen kleuren opgeven.

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

5
2017-11-13 06:49



Zoals vermeld door antonversal, het lezen van de kleuren en het gebruik van de kleurenoptie bij het maken van het grafiekobject werkt.

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

4
2018-06-25 20:17



Voeg dit toe ... of u kunt de kleuren volgens uw vraag veranderen.

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

    });

0
2017-10-06 09:44