web-dev-qa-db-fra.com

Couleur différente pour chaque barre dans un graphique à barres; ChartJS

J'utilise ChartJS dans un projet sur lequel je travaille et j'ai besoin d'une couleur différente pour chaque barre d'un graphique à barres. 

Voici un exemple du jeu de données du graphique à barres:

var barChartData = {
  labels: ["001", "002", "003", "004", "005", "006", "007"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)", 
    strokeColor: "rgba(220,220,220,0.8)", 
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [20, 59, 80, 81, 56, 55, 40]
  }]
};

Est-il possible de peindre chaque barre différemment?

javascriptchart.js
62
BoooYaKa

Après avoir examiné le fichier Chart.Bar.js, j'ai trouvé la solution ..___ J'ai utilisé cette fonction pour générer une couleur aléatoire:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

Je l’ai ajoutée à la fin du fichier et j’ai appelé cette fonction dans le "fillColor:" sous

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

alors maintenant ça ressemble à ça:

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

                    datasetObject.bars.Push(new this.BarClass({
                        value : dataPoint,
                        label : data.labels[index],
                        datasetLabel: dataset.label,
                        strokeColor : dataset.strokeColor,
                        fillColor : getRandomColor(),
                        highlightFill : dataset.highlightFill || dataset.fillColor,
                        highlightStroke : dataset.highlightStroke || dataset.strokeColor
                    }));
                },this);

et ça marche, je reçois une couleur différente pour chaque barre.

36
BoooYaKa

Solution: appelez la méthode de mise à jour pour définir de nouvelles valeurs:

var barChartData = {
    labels: ["January", "February", "March"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)", 
            strokeColor: "rgba(220,220,220,0.8)", 
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [20, 59, 80]
        }
    ]
};

window.onload = function(){
    var ctx = document.getElementById("mycanvas").getContext("2d");
    window.myObjBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
    });

    //nuevos colores
    myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
    myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
    myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3
    myObjBar.update();
}
60
Jerry

A partir de la v2, vous pouvez simplement spécifier un tableau de valeurs correspondant à une couleur pour chaque barre via la propriété backgroundColor:

datasets: [{
  label: "My First dataset",
  data: [20, 59, 80, 81, 56, 55, 40],
  backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], 
}],

Ceci est également possible pour les variables borderColor, hoverBackgroundColor, hoverBorderColor.

À partir de la documentation sur le Propriétés du jeu de données graphique à barres :

Certaines propriétés peuvent être spécifiées en tant que tableau. Si celles-ci sont définies sur une valeur de tableau, la première valeur s'applique à la première barre, la deuxième valeur à la deuxième barre, etc.

25
thanksd

Si vous regardez la bibliothèque " ChartNew " qui s'appuie sur Chart.js, vous pouvez le faire en transmettant les valeurs sous forme de tableau, comme ceci:

var data = {
    labels: ["Batman", "Iron Man", "Captain America", "Robin"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [2000, 1500, 1750, 50]
        }
    ]
};
22
Muhammad Mohsin Muneer

Vous pouvez appeler cette fonction qui génère des couleurs aléatoires pour chaque barre 

var randomColorGenerator = function () { 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
};

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: randomColorGenerator(), 
                strokeColor: randomColorGenerator(), 
                highlightFill: randomColorGenerator(),
                highlightStroke: randomColorGenerator(),
                data: [20, 59, 80, 81, 56, 55, 40]
            }
        ]
    };
14
Sudharshan

Générer des couleurs aléatoires;

function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

et appelez-le pour chaque enregistrement;

function getRandomColorEachEmployee(count) {
        var data =[];
        for (var i = 0; i < count; i++) {
            data.Push(getRandomColor());
        }
        return data;
    }

enfin mettre les couleurs;

var data = {
            labels: jsonData.employees,// your labels
            datasets: [
                {
                    data: jsonData.approvedRatios,// your data
                    backgroundColor: getRandomColorEachEmployee(jsonData.employees.length)
                }
            ]
        };
4
sawetefe

Ici, j'ai résolu ce problème en créant deux fonctions . 1. dynamicColors () pour générer une couleur aléatoire

function dynamicColors() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";}

  1. poolColors () pour créer un tableau de couleurs

    function poolColors(a) { var pool = []; for(i=0;i<a;i++){ pool.Push(dynamicColors());} return pool; }

Ensuite, il suffit de le passer 

datasets: [{ data: arrData, backgroundColor: poolColors(arrData.length), borderColor: poolColors(arrData.length), borderWidth: 1 }]

3
Abdul Hameed

voici comment j'ai traité: J'ai poussé un tableau "couleurs", avec le même nombre d'entrées que le nombre de données. Pour cela, j'ai ajouté une fonction "getRandomColor" à la fin du script . J'espère que ça aide ...

for(var i in arr) {
        customers.Push(arr[i].customer);
        nb_cases.Push(arr[i].nb_cases);
        colors.Push(getRandomColor());
        }

     window.onload = function() {
    var config = {
    type: 'pie',
    data: {
        labels: customers,
        datasets: [{
            label: "Nomber of cases by customers",
            data: nb_cases,
            fill: true,
            backgroundColor: colors 
            }]
    },
    options: {
        responsive: true,
        title:{
        display:true,
        text:"Cases by customers"
        },
    }
    };



var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};


function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
2
Jean-François Rullier

Si vous ne pouvez pas utiliser NewChart.js, il vous suffit de modifier le mode de définition de la couleur à l'aide de array .

Remplace cette ligne:

fillColor : dataset.fillColor,

Pour celui-ci:

fillColor : dataset.fillColor[index],

Le code résultant:

//Iterate through each of the datasets, and build this into a property of the chart
  helpers.each(data.datasets,function(dataset,datasetIndex){

    var datasetObject = {
      label : dataset.label || null,
      fillColor : dataset.fillColor,
      strokeColor : dataset.strokeColor,
      bars : []
    };

    this.datasets.Push(datasetObject);

    helpers.each(dataset.data,function(dataPoint,index){
      //Add a new point for each piece of data, passing any required data to draw.
      datasetObject.bars.Push(new this.BarClass({
        value : dataPoint,
        label : data.labels[index],
        datasetLabel: dataset.label,
        strokeColor : dataset.strokeColor,
        //Replace this -> fillColor : dataset.fillColor,
        // Whith the following:
        fillColor : dataset.fillColor[index],
        highlightFill : dataset.highlightFill || dataset.fillColor,
        highlightStroke : dataset.highlightStroke || dataset.strokeColor
      }));
    },this);

  },this);

Et dans ton js:

datasets: [
                {
                  label: "My First dataset",
                  fillColor: ["rgba(205,64,64,0.5)", "rgba(220,220,220,0.5)", "rgba(24,178,235,0.5)", "rgba(220,220,220,0.5)"],
                  strokeColor: "rgba(220,220,220,0.8)",
                  highlightFill: "rgba(220,220,220,0.75)",
                  highlightStroke: "rgba(220,220,220,1)",
                  data: [2000, 1500, 1750, 50]
                }
              ]
2
Armando Reyna

essaye ça :

  function getChartJs() {
        **var dynamicColors = function () {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
        }**

        $.ajax({
            type: "POST",
            url: "ADMIN_DEFAULT.aspx/GetChartByJenisKerusakan",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var labels = r.d[0];
                var series1 = r.d[1];
                var data = {
                    labels: r.d[0],
                    datasets: [
                        {
                            label: "My First dataset",
                            data: series1,
                            strokeColor: "#77a8a8",
                            pointColor: "#eca1a6"
                        }
                    ]
                };

                var ctx = $("#bar_chart").get(0).getContext('2d');
                ctx.canvas.height = 300;
                ctx.canvas.width = 500;
                var lineChart = new Chart(ctx).Bar(data, {
                    bezierCurve: false,
                    title:
                      {
                          display: true,
                          text: "ProductWise Sales Count"
                      },
                    responsive: true,
                    maintainAspectRatio: true
                });

                $.each(r.d, function (key, value) {
                    **lineChart.datasets[0].bars[key].fillColor = dynamicColors();
                    lineChart.datasets[0].bars[key].fillColor = dynamicColors();**
                    lineChart.update();
                });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
1
FannyKaunang

Code basé sur la requête pull suivante :

datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
0
voho

Depuis août 2019, Chart.js intègre désormais cette fonctionnalité.

Successful bar chart with different colored bars

Vous devez simplement fournir un tableau à backgroundColor.

Exemple tiré de https://www.chartjs.org/docs/latest/getting-started/

Avant: 

  data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

Après: 

  data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: ['rgb(255, 99, 132)','rgb(0, 255, 0)','rgb(255, 99, 132)','rgb(128, 255, 0)','rgb(0, 255, 255)','rgb(255, 255, 0)','rgb(255, 255, 128)'],
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

Je viens de tester cette méthode et ça marche. Chaque barre a une couleur différente.

0
legoblocks

Cela fonctionne pour moi dans la version actuelle 2.7.1:

function colorizePercentageChart(myObjBar) {

var bars = myObjBar.data.datasets[0].data;
console.log(myObjBar.data.datasets[0]);
for (i = 0; i < bars.length; i++) {

    var color = "green";

    if(parseFloat(bars[i])  < 95){
        color = "yellow";
    }
    if(parseFloat(bars[i])  < 50){
         color = "red";
    }

    console.log(color);
    myObjBar.data.datasets[0].backgroundColor[i] = color;

}
myObjBar.update();

}

0
Damian

En prenant l’autre réponse, voici une solution rapide si vous souhaitez obtenir une liste avec des couleurs aléatoires pour chaque barre:

function getRandomColor(n) {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    var colors = [];
    for(var j = 0; j < n; j++){
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        colors.Push(color);
        color = '#';
    }
    return colors;
}

Vous pouvez maintenant utiliser cette fonction dans le champ backgroundColor des données:

data: {
        labels: count[0],
        datasets: [{
            label: 'Registros en BDs',
            data: count[1],
            backgroundColor: getRandomColor(count[1].length)
        }]
}
0
Eduardo Luis Santos

Si vous savez quelles couleurs vous voulez, vous pouvez spécifier les propriétés de couleur dans un tableau, comme ceci:

    backgroundColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
    borderColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
0
frostbyyte

Je viens juste de recevoir ce numéro récemment, et voici ma solution

var labels = ["001", "002", "003", "004", "005", "006", "007"];
var data = [20, 59, 80, 81, 56, 55, 40];
for (var i = 0, len = labels.length; i < len; i++) {
   background_colors.Push(getRandomColor());// I use @Benjamin method here
}

var barChartData = {
  labels: labels,
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)", 
    strokeColor: "rgba(220,220,220,0.8)", 
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    backgroundColor: background_colors,
    data: data
  }]
};
0
Feiyu Chen