web-dev-qa-db-fra.com

définir des couleurs différentes pour chaque colonne dans les graphiques en haut

J'ai besoin de définir différentes couleurs pour chaque colonne dans le graphique Highcharts de manière dynamique. Mon graphique Highcharts est:

options = {
         chart: {
             renderTo: 'chart',
             type: 'column',
             width: 450
         },
         title: {
             text: 'A glance overview at your contest’s status'
         },
         xAxis: {
             categories: ['Approved Photos', 'Pending Approval Photos', 
                          'Votes', 'Entrants'],
             labels: {
                 //rotation: -45,
                 style: {
                     font: 'normal 9px Verdana, sans-serif, arial'
                 }
             }
         },
         yAxis: {
             allowDecimals: false,
             min: 0,
             title: {
                 text: 'Amount'
             }
         },
         legend: {
             enabled: false
         },
         series: []
     };
     series = {
         name: "Amount",
         data: [],
         dataLabels: {
             enabled: true,
             color: '#000000',
             align: 'right',
             x: -10,
             y: 20,
             formatter: function () {
                 return this.y;
             },
             style: {
                 font: 'normal 13px Verdana, sans-serif'
             }
     }
 };

Les données sont définies comme suit:

for (var i in Data) {
  if (parseInt(Data[i]) != 0) {
    series.data.Push(parseInt(Data[i]));
  } else {
    series.data.Push(null);
  }
}
options.series.Push(series);
chart = new Highcharts.Chart(options);

Comment définir dynamiquement des couleurs différentes pour chaque point de données de cette boucle?

javascripthighcharts
44
user750487

Lorsque vous ajoutez la valeur à series.data, vous pouvez également définir la couleur à l'aide des options de point, par exemple.

series.data.Push({ y: parseInt(Data[i]), color: '#FF0000' });

Pour plus de détails sur les options de points, voir https://api.highcharts.com/class-reference/Highcharts.Point#color

51
escouser

Voici une autre solution avec la dernière version de Highcharts (actuellement 3.0).

Définissez l'option colorByPoint sur true et définissez la séquence color souhaitée.

options = {
    chart: {...},
    plotOptions: {
        column: {
            colorByPoint: true
        }
    },
    colors: [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ]
}

Voici un exemple basé sur la démo Highcharts Column avec étiquettes tournées

65
Jérôme

Essayez l'une de ces approches:

Approche 1:

Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });

Approche 2:

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];

 $('#bar_chart').highcharts({
        chart: {
            type: 'column'              
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: false                       
                }
            }
        },         

        series: [{
            name: '',
            colorByPoint: true,
            data: [{
                name: 'Blue',
                y: 5.78,
                color: colors[0]

            }, {
                name: 'Green',
                y: 5.19,
                color: colors[1]

            }, {
                name: 'Pink',
                y: 32.11,
                color: colors[2]

            }, {
                name: 'Yellow',
                y: 10.04,
                color: colors[3]

            }, {
                name: 'Purple',
                y: 19.33,
                color: colors[4]

            }]
        }]
    });
3
Mahalakshmi Chinnadurai

j'ai eu des couleurs de la réponse de l'API et 2 séries. deuxième série aux couleurs dynamiques. 

voici un exemple pour définir des couleurs dynamiques lors du mappage de séries. 

const response = [{
    'id': 1,
    'name': 'Mango',
    'color': '#83d8b6',
    'stock': 12.0,
    'demand': 28,
  },
  {
    id ': 2,
    'name': 'Banana',
    'color': '#d7e900',
    'stock': 12.0,
    'demand': 28,
  }
];
let chartData: {
  categories: [],
  series: []
};
chartData.categories = response.map(x => x.name);
chartData.series.Push({
  name: 'Series 1',
  type: 'column',
  data: response.map(x => x.demand)
});
chartData.series.Push({
  name: 'Series 2',
  type: 'column',
  data: response.map(x => ({
    y: x.stock,
    color: x.color // set color here dynamically
  }))
});
console.log('chartData: ', chartData);

vous pouvez également en savoir plus sur Highcharts series Point and Marker

0
Ravi Anand