Graphique Charts js avec barre verticale

**micakel_53** · 03/12/2020, 12h30

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 :

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
 
 
                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 !

**NoSmoking** · 04/12/2020, 08h00

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.

**micakel_53** · 04/12/2020, 08h46

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é !

**micakel_53** · 08/12/2020, 10h00

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.

**Toufik83** · 08/12/2020, 13h12

Bonjour,

Voilà un exemple en ligne avec les errorBars, c'est l'option errorBars de chaque item de datasets qu'il faut intégrer.

**micakel_53** · 08/12/2020, 14h05

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

**Toufik83** · 08/12/2020, 14h33

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 html :

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
 
<!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>
       <!-- et ici tu mets le code de Chartjs -->
    </script>
</body>
</html>

**micakel_53** · 08/12/2020, 14h40

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

**NoSmoking** · 08/12/2020, 17h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

• datavisyn :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**micakel_53** · 10/12/2020, 13h10

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

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

Je vous joint une image du graph :

Nom : graph.png
Affichages : 408
Taille : 29,0 Ko

Nom : graph.png
Affichages : 408
Taille : 29,0 Ko

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

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.

**NoSmoking** · 11/12/2020, 09h03

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

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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']],
};

... 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.

Graphique Charts js avec barre verticale

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager