IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Changer la couleur de la bar selon la valeur de la serie [Chart.js]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2020
    Messages
    54
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2020
    Messages : 54
    Points : 53
    Points
    53
    Par défaut Changer la couleur de la bar selon la valeur de la serie
    Bonjour à tous
    J'essai de construire un graphique à partir de données provenant d'une requête SQL. Il s'agit d'un graphique mixte (linéaire et barre).
    Tout se passe bien et mon graphique s'affiche correctement, sauf que je souhaiterai changer la couleur des barres en fonction des valeurs de la série concernée.

    Par exemple, je souhaiterai que la barre passe rouge si la valeur de la barre est supérieure a la valeur de max de la même série.

    Je n'arrive pas à le faire, les réponses que je trouve font référence à des graphique simple et non combiné comme dans mon cas. Je me tourne donc vers vous.

    Ci dessous mon code :
    Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    function mychart(test) {
        var ops = [];
        var serie = [];
        var min = [];
    	var max = [];
     
    	for (var i in test) {
    		ops.push(test[i].ops);
            serie.push(test[i].serie);
            min.push(test[i].min);
            max.push(test[i].max);
        }
     
    	var chartdata = {
    		labels: ops,
    		datasets: [
    			{
    				type: 'line',
    				label: 'Min',
    				yAxisID: 'A',
    				backgroundColor: "rgb(255, 0, 0)",
    				borderColor: "rgb(255, 0, 0)",
    				data: min //la valeur mini a comparer avec la valeur de serie
    			}, {
    				type: 'line',
    				label: 'Max',
    				yAxisID: 'A',
    				backgroundColor: "rgb(255, 255, 0)",
    				borderColor: "rgb(255, 255, 0)",
    				data: max //la valeur maxi a comparer avec la valeur de serie
    			}, {
    				type: 'bar',
    				label: 'Serie',
    				yAxisID: 'A',
    				backgroundColor: "rgb(0, 0, 255)", // changer couleur si valeur serie inferieure ou superieur a maxi
    				data: serie //la valeur serie a comparer avec les valeurs mini et maxi
    			}
    		]
        };
        rendertest(chartdata);
    }
     
    function rendertest(chartdata) {
    	var delayed;
        var ctx = document.getElementById("charttest").getContext('2d');
        window.myCharta = new Chart(ctx, {
    		type: 'bar',
    		data: chartdata,
    		options: {
    			responsive: true,
    			plugins: {
    				legend: {
                        display: true,
                        position: 'bottom',
                    },
    				title: {
    					display: true,
    					position: 'top',
    					align: "start",
    					text: 'Graphique test',
    					font: {
    						size: 20,
    						family : 'sans-serif',
    						color: "#666",
    						weight: "normal"
    					}
    				},
    			},
    			animation: {
    				onComplete: () => {
    					delayed = true;
    				},
    				delay: (context) => {
    					let delay = 0;
    					if (context.type === 'data' && context.mode === 'default' && !delayed) {
    						delay = context.dataIndex * 300 + context.datasetIndex * 100;
    					}
    					return delay;
    				},
    			},
    			maintainAspectRatio: true
    		}
    	});
    }

    Merci d'avance pour votre aide

    Cordialement

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    Bonjour,

    Quelle est la structure et les valeurs du paramètre test de la fonction mychart(test) ?

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2020
    Messages
    54
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2020
    Messages : 54
    Points : 53
    Points
    53
    Par défaut
    Bonjour

    Ci dessous la structure :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    [
        {
            "ops": "Ops1",
            "serie": 0.23,
            "max": 0.49,
            "min": 0.42
        },
        {
            "ops":  "Ops2",
            "serie": 0.19,
            "max":  0.49,
            "min":  0.42
        }
    ]
    Merci

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    Bonjour,

    Si je comprends bien cette fonction pourrait être utile :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    let setColor=function(mx,ser){
        return ser.map((value,index)=>{
      	 console.log(value,mx[index]);
             return value>mx[index]?"rgb(255, 0, 0)":"green";
        }) ;
    }
    Puis vous appelez la fonction en l'affectant à la propriété backgroundColor du 3éme élément :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    {
    	type: 'bar',
    	label: 'Serie',
    	yAxisID: 'A',
    	backgroundColor: setColor(max,serie), // changer couleur si valeur serie inferieure ou superieur a maxi
    	data: serie //la valeur serie a comparer avec les valeurs mini et maxi
    }

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2020
    Messages
    54
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2020
    Messages : 54
    Points : 53
    Points
    53
    Par défaut
    Merci pour ton aide, c'est parfait!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] changer la couleur du tr table selon le modificateur (user ou admin)
    Par casawia dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 15/08/2014, 10h30
  2. Changer la couleur d une ligne selon la valeur d une cellule
    Par TGO2009 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 22/03/2014, 01h06
  3. Changer la couleur d'arriere plan selon le menu choisi
    Par amani1 dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 01/02/2014, 17h59
  4. [XL-2007] Mise en couleur d'une cellule selon la valeur d'une autre cellule
    Par young 25 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 05/02/2012, 12h00
  5. Changer la couleur du scrool-bar
    Par ThitoO dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 11/01/2005, 21h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo