Graphique Charts js avec barre verticale

Version imprimable

Bonjour à tous,

Tout d'abord désoler si je ne suis pas dans la bonne section.

J'utilise Chart.js pour faire des graphiques.

J'ai un graphique avec trois séries de données ; minimum, moyenne et maximum et jusque là pas de soucis.

voici le code :

Code:

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
 
 
                var ctx =document.getElementById('GraphPoids').getContext('2d');
 
var myChart = new Chart(ctx,{
    type:'line',
    data:{
            labels:ArrLabelSaison,
            datasets:[{
                label:"Poids minimum",
                pointStyle:'line',
                showLine : false,
                radius:'10',
                data:dataMin,
                backgroundColor:'rgba(0,0,0,0)',
                borderColor:'rgba(53,53,53,0.5)',
                fill:false,
                lineTension : 0
            },{
                label:"Poids moyen",
                pointStyle:'crossRot',
                radius:'10',
                data:dataMoy,
                backgroundColor:'rgba(0,0,0,0)',
                borderColor:'rgba(0,0,255,0.5)',
                fill:false,
                lineTension : 0
            },{
                label:"Poids maximun",
                pointStyle:'line',
                showLine : false,
                radius:'10',
                data:dataMax,
                backgroundColor:'rgba(0,0,0,0)',
                borderColor:'rgba(26,188,156,0.5)',
                fill:false,
                lineTension : 0
 
 
            }
 
            ]
        },
    options:{
 
            responsive: true,
            title: {
                    display: true,
                    text: 'Evolution du poids'
                    },
            tooltips: {
                        mode: 'index'
                        },
            scales: {
                        xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                                    display: true
                                                }
                                }],
                        yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                                    display: true,
                                                    labelString: 'Poids en kg'
                                                },
                                    //ticks: {
                                                //suggestedMin: -10,
                                                //suggestedMax: 200,
                                            //}
                                }]
                    },
            legend : {
                        display : true
                    },
 
 
            }
});

Maintenant j'aimerai pouvoir relier les points minimum et maximum par une barre verticale mais je ne trouve pas de solution.
Si quelqu'un peut me donner un coup de main, je suis preneur.
Merci à tous et bon courage !

04/12/2020, 08h00
NoSmoking

Bonjour,
ChartJS et simple mais pas très configurable, cependant tu peux regarder du côté du plugin : Chart.js Error Bars qui devrait te permettre de faire ce que tu souhiates.
04/12/2020, 08h46
micakel_53

Ok je vais regardé ça et je vous tiens au courant. Je n'ai jamais utilisé de plugin mais je vais essayer d'en trouver le fonctionnement.
Encore merci pour votre réactivité ! :ccool:
08/12/2020, 10h00
micakel_53

Bonjour,
Le plugin Chart.js Error Bars semble correspondre à mes attentes. Mais après plusieurs essais je n'arrive pas à l'utiliser ce plugin. Est ce que quelqu'un pourrait m'expliquer la démarche à suivre pour incorporer ce plugin à ma page ?
Merci à vous tous.
08/12/2020, 13h12
Toufik83

Bonjour,

Voilà un exemple en ligne avec les errorBars, c'est l'option errorBars de chaque item de datasets qu'il faut intégrer.
08/12/2020, 14h05
micakel_53

Mon problème est plutôt d’intégrer le plugin à mon script pas trop dans son utilisation ensuite.

Bonjour,

Dans l'exemple que je t'ai montré, clic sur "Settings" en haut a droite puis va sur l'onglet "JS", tu verras qu'il y'a des fichiers externes importés https://unpkg.com/chart.js/dist/Chart.bundle.js et https://unpkg.com/chartjs-plugin-error-bars@1.2.2.

Le premier lien est Chartjs et le deuxième est Chartjs-error-bars.

Copies ces deux liens et tu les ajoutes dans <head> de ta page html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Chartjs Exemple</title> <script src="https://unpkg.com/chart.js/dist/Chart.bundle.js"></script> <script src="https://unpkg.com/chartjs-plugin-error-bars@1.2.2"></script> </head> <body> <canvas id="canvas"></canvas> <script>  </script> </body> </html>

08/12/2020, 14h40
micakel_53

C'est top ! Merci pour ta réponse.
Je m'empresse d'essayer et je vous tiens au courant.

Il existe donc au moins deux plugins pour faire cela, ce n'est pas celui qu'a présenté Toufik83 que j'avais repéré.

Celui de datavisyn diffère quand même pas mal sur la présentation des données que je trouve plus parlante sur celui de sgratzl.
• sgratzl :
Code:

1 2 3 4 5 6 datasets: [{ data: [{},{ y: 4, yMin: 3, yMax: 5, },
• datavisyn :
Code:

1 2 3 4 5 6 7 8 9 10 data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ ... errorBars: { 'February': {plus: 15, minus: -34}, 'March': {plus: 5, minus: -24}, 'May': {plus: 35, minus: -14}, 'June': {plus: 45, minus: -4} }, ...
mais bon c'est une affaire de goût et cela ne préjuge pas du reste des possibilités offertes.

10/12/2020, 13h10
micakel_53

1 pièce(s) jointe(s)

Voilà mon retour d'expérience comme promis.

J'ai utilisé chartjs-chart-error-bars de sgratzl.

Je vous joint une image du graph :

Pièce jointe 586334

C'est plutôt déjà pas mal mais on en veut toujours plus ! :mouarf:

J'aurai aimer savoir si je peux styliser la barre verticale et afficher dans la légende que les bornes représentent le poids minimum et maximum.

En tout cas merci pour votre aide.

Citation:

J'ai utilisé chartjs-chart-error-bars de sgratzl.

Cela m'a l'air d'être un bon choix :mrgreen:

Citation:

J'aurai aimer savoir si je peux styliser la barre verticale ...

tu as des propriétés mises à disposition qui te permettent de modifier l'aspect mais c'est assez limité.
Code:

1 2 3 4 5 6 7 8 9 var defaults = { errorBarLineWidth: [[1, 3]], errorBarColor: [['#2c2c2c', '#1f1f1f']], errorBarWhiskerLineWidth: [[1, 3]], errorBarWhiskerRatio: [[0.2, 0.25]], errorBarWhiskerSize: [[20, 24]], errorBarWhiskerColor: [['#2c2c2c', '#1f1f1f']], };
Citation:

... et afficher dans la légende que les bornes représentent le poids minimum et maximum.

La légende ne fait apparaître que les séries prises en compte et rien de plus.