[AnyChart] Créer une barre d'objectif

**theocbr** · 04/06/2019, 09h12

Bonjour , actuellement en stage , j'ai besoin d'aide concernant le js , j'aimerais insérer une barre modulable (soit avec la souris , ou sois en rentrant des valeurs , le plus simple me suffit) qui servirait d'objectif à atteindre dans un graphique , exemple :

Nom : IMG_3031.JPG
Affichages : 437
Taille : 1,64 Mo

Nom : IMG_3031.JPG
Affichages : 437
Taille : 1,64 Mo

**NoSmoking** · 05/06/2019, 09h48

Bonjour et bienvenue sur DVP.
Il serait intéressant que tu nous dises comment ou avec quelle librairie tu réalises ton graphe.

**SpaceFrog** · 05/06/2019, 10h00

Il faudrait aussi apprendre la rotation des images, j'ai mal au cou

Sinon y'a alt+impr écran ...

**NoSmoking** · 05/06/2019, 10h07

Envoyé par SpaceFrog

Il faudrait aussi apprendre la rotation des images, j'ai mal au cou

comment tu fais, moi je tourne l'écran !

**SpaceFrog** · 05/06/2019, 10h32

Mince, j'ai tenté de tilter le bureau, mais tout est tombé ...

**theocbr** · 11/06/2019, 09h34

question de flemme pour l'image ^^'

j'utilise la blibliotheque GoogleCharts , oui c'est pas la meilleur , mais j'ai cherché dans highcharts et j'ai pas trouvé mon bonheur.

Voici mon code si besoin :

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
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
85
86
87
88
<body>
  <div id="container"></div>
  <script>
anychart.onDocumentReady(function () {
    // créer un ensemble de données sur nos données
    var dataSet = anychart.data.set([
        
        ['Lundi',resulttotalL3, resulttotalL1, resulttotalL2],
        ['Mardi',resulttotalL3 ,resulttotalL1 , resulttotalL2 ],
        ['Mercredi',resulttotalL3 ,resulttotalL1 , resulttotalL2],
        ['Jeudi',resulttotalL3 ,resulttotalL1,resulttotalL2 ],
        ['Vendredi', resulttotalL3 , resulttotalL1,resulttotalL2 ],
        ['Samedi',resulttotalL3 ,resulttotalL1 ,resulttotalL2],
        
    ]);
 
    // mapper les données pour la première série, prendre x dans la colonne zéro et la valeur dans la première colonne du jeu de données
    var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
 
    // map data for the second series, take x from the zero column and value from the second column of data set
    var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
 
    // map data for the second series, take x from the zero column and value from the third column of data set
    var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
 
    // map data for the fourth series, take x from the zero column and value from the fourth column of data set
    var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
 
    // créer un graphique à barres
    var chart = anychart.column();
 
    // activer l'animation graphique
 
    chart.animation(true);
 
    // force graphique pour empiler les valeurs par l’échelle Y.
    chart.yScale().stackMode('value');
 
    // définir les paramètres de texte du titre du graphique
     chart.title('Conditionnement');
    chart.title().padding([0, 0, 5, 0]);
 
    // fonction d'assistance pour configurer les paramètres d'étiquette pour toutes les séries
    var setupSeriesLabels = function (series, name) {
        series.name(name)
                .stroke('3 #fff 1');
        series.hovered().stroke('3 #fff 1');
    };
 
    // variable temporaire pour stocker l'instance de la série
    var series;
 
    // créer la première série avec des données mappées
    series = chart.column(seriesData_1);
    setupSeriesLabels(series, 'FP');
 
    // créer une deuxième série avec des données mappées
    series = chart.column(seriesData_2);
    setupSeriesLabels(series, 'BPA');
 
    // créer une troisième série avec des données mappées
    series = chart.column(seriesData_3);
    setupSeriesLabels(series, 'PAAL');
 
 
    // turn on legend
    chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
    // set yAxis labels formatter
    chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
 
    // définir les titres des axes
    chart.xAxis().title('Jour de la semaine');
    chart.yAxis().title('Pochons');
 
    // définir le survol interactif
    chart.interactivity().hoverMode('by-x');
 
    chart.tooltip()
            .valuePrefix('$')
            .displayMode('union');
    // définir l'identifiant du conteneur pour le graphique
    chart.container('container');
 
    // initier le dessin graphique
    chart.draw();
});
</script>
</body>

**theocbr** · 12/06/2019, 11h01

j'ai cherché un peur par moi même et j'ai trouvé qlq chose , le problème c'est que je n'arrive pas a empilée la barre de seuil sur les données du graph et si possible j'aimerais changer "series 3" par "objectif"

Nom : Captureergr.PNG
Affichages : 362
Taille : 18,6 Ko

Nom : Captureergr.PNG
Affichages : 362
Taille : 18,6 Ko

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
80
81
82
83
84
85
86
 
 
  <script>
anychart.onDocumentReady(function () {
    // créer un ensemble de données sur nos données
    var dataSet = anychart.data.set([
 
        ['Lundi',resultcondiLundiFP, resultcondiLundiBPA, resultcondiLundiPaal],
        ['Mardi',resultcondiMardiFP ,resultcondiMardiBPA , resultcondiMardiPaal ],
        ['Mercredi',resultcondiMercrediFP ,resultcondiMercrediBPA , resultcondiMercrediPaal],
        ['Jeudi',resultcondiJeudiFP ,resultcondiJeudiBPA,resultcondiJeudiPaal ],
        ['Vendredi', resultcondiVendrediFP , resultcondiVendrediBPA,resultcondiVendrediPaal ],]);
		var data3 = [700000, 700000, 700000, 700000, 700000];
 
    // mapper les données pour la première série, prendre x dans la colonne zéro et la valeur dans la première colonne du jeu de données
    var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
 
    // map data for the second series, take x from the zero column and value from the second column of data set
    var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
 
    // map data for the second series, take x from the zero column and value from the third column of data set
    var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
 
    // map data for the fourth series, take x from the zero column and value from the fourth column of data set
    var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});
 
    // créer un graphique à barres
    var chart = anychart.column();
 
    // activer l'animation graphique
 
    chart.animation(true);
 
    // force graphique pour empiler les valeurs par l’échelle Y.
    chart.yScale().stackMode('value');
 
    // définir les paramètres de texte du titre du graphique
     chart.title('Conditionnement');
    chart.title().padding([0, 0, 5, 0]);
 
    // fonction d'assistance pour configurer les paramètres d'étiquette pour toutes les séries
    var setupSeriesLabels = function (series, name) {
        series.name(name)
                .stroke('3 #fff 1');
        series.hovered().stroke('3 #fff 1');
    };
 
    // variable temporaire pour stocker l'instance de la série
    var series;
 
    // créer la première série avec des données mappées
    series = chart.column(seriesData_1);
    setupSeriesLabels(series, 'FP');
 
    // créer une deuxième série avec des données mappées
    series = chart.column(seriesData_2);
    setupSeriesLabels(series, 'BPA');
 
    // créer une troisième série avec des données mappées
    series = chart.column(seriesData_3);
    setupSeriesLabels(series, 'PAAL');
 
	chart.line(data3); // barre de seuil
 
    // turn on legend
    chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
    // set yAxis labels formatter
    chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
 
    // définir les titres des axes
    chart.xAxis().title('Jour de la semaine');
    chart.yAxis().title('Pochons');
 
    // définir le survol interactif
    chart.interactivity().hoverMode('by-x');
 
    chart.tooltip()
            .valuePrefix('')
            .displayMode('union');
    // définir l'identifiant du conteneur pour le graphique
    chart.container('container');
 
    // initier le dessin graphique
    chart.draw();
});
</script>

**NoSmoking** · 12/06/2019, 18h43

• Tu dis utiliser la bibliothèque GoogleCharts, mais le code que tu montres utilise la bibliothèque anychart (payante) !

• La dernière image que tu proposes n'a rien à voir avec la première postée (forme du graphique) !!

Pourrais tu clarifier tout cela et nous dire ce que tu souhaites obtenir réellement !!!

**theocbr** · 13/06/2019, 08h16

J'utilisais pour une autre page un graph de googlecharts sorry je me suis embrouillée, effectivement j'utilise anychart , la forme du graphique on s'en fiche j'ai voulu montrer la barre d'objectif pas le graph c:

Et je souhaiterais en utilisant le code ci dessus , placer cette barre de seuil au dessus de mes données , comme sur la photo.
Je vois pas comment tu peux ne pas comprendre...

**theocbr** · 13/06/2019, 08h49

C'est bon en cherchant moi même j'ai trouvé une solution en bidouillant un peu dans anycharts , j'ai trouvé une ligne déjà faite , je l'ai intégrée et je l'ai adaptée a mon graph.

Nom : dfxfdx.PNG
Affichages : 337
Taille : 50,6 Ko

Nom : dfxfdx.PNG
Affichages : 337
Taille : 50,6 Ko

Je laisse le code , si nécéssaire :

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
  <script>
anychart.onDocumentReady(function () {
    // créer un ensemble de données sur nos données
    var dataSet = anychart.data.set([
 
        ['Lundi',resultcondiLundiFP, resultcondiLundiBPA, resultcondiLundiPaal,],
        ['Mardi',resultcondiMardiFP ,resultcondiMardiBPA , resultcondiMardiPaal ],
        ['Mercredi',resultcondiMercrediFP ,resultcondiMercrediBPA , resultcondiMercrediPaal],
        ['Jeudi',resultcondiJeudiFP ,resultcondiJeudiBPA,resultcondiJeudiPaal ],
        ['Vendredi', resultcondiVendrediFP , resultcondiVendrediBPA,resultcondiVendrediPaal ],]);
 
 
    // mapper les données pour la première série, prendre x dans la colonne zéro et la valeur dans la première colonne du jeu de données
    var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
 
    // map data for the second series, take x from the zero column and value from the second column of data set
    var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});
 
    // map data for the second series, take x from the zero column and value from the third column of data set
    var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});
 
 
 
    // créer un graphique à barres
    var chart = anychart.column();
 
    // activer l'animation graphique
 
    chart.animation(true);
 
    // force graphique pour empiler les valeurs par l’échelle Y.
    chart.yScale().stackMode('value');
 
    // définir les paramètres de texte du titre du graphique
     chart.title('Conditionnement');
    chart.title().padding([0, 0, 5, 0]);
 
    // fonction d'assistance pour configurer les paramètres d'étiquette pour toutes les séries
    var setupSeriesLabels = function (series, name) {
        series.name(name)
                .stroke('3 #fff 1');
        series.hovered().stroke('3 #fff 1');
    };
 
    // variable temporaire pour stocker l'instance de la série
    var series;
 
    // créer la première série avec des données mappées
    series = chart.column(seriesData_1);
    setupSeriesLabels(series, 'FP');
 
    // créer une deuxième série avec des données mappées
    series = chart.column(seriesData_2);
    setupSeriesLabels(series, 'BPA');
 
    // créer une troisième série avec des données mappées
    series = chart.column(seriesData_3);
    setupSeriesLabels(series, 'PAAL');
 
 
	//BARRE DE SEUIL
	   var yAxis = chart.yAxis();
var marker = chart.lineMarker();
marker.axis(yAxis);
marker.value(700000);
marker.stroke('red 1', 3);
marker.zIndex(100);
  var textMarker = chart.textMarker();
textMarker.axis(chart.yAxis());
textMarker.value(70000);
textMarker.align("right");
textMarker.anchor("right-bottom");
textMarker.fontSize(24);
textMarker.fontColor("red");
textMarker.offsetX(5);
textMarker.offsetY(255)
textMarker.text("Objectif");
 
 
 
    // turn on legend
    chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
    // set yAxis labels formatter
    chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
 
    // définir les titres des axes
    chart.xAxis().title('Jour de la semaine');
    chart.yAxis().title('Pochons');
 
    // définir le survol interactif
    chart.interactivity().hoverMode('by-x');
 
    chart.tooltip()
            .valuePrefix('')
            .displayMode('union');
    // définir l'identifiant du conteneur pour le graphique
    chart.container('container');
 
    // initier le dessin graphique
    chart.draw();
});
</script>

**NoSmoking** · 13/06/2019, 16h35

Je vois pas comment tu peux ne pas comprendre...

en l’absence de précision et n'étant pas dans ta tête pour savoir ce que précisément tu veux réalisé et d'autant que ...

je me suis embrouillée, (..)

alors j'ai peur que nous l'étions également

**theocbr** · 14/06/2019, 15h33

Effectivement , je n'ai pas l'habitude de poster sur un forum , maintenant je sais qu'il faut bien tout expliquer car vous êtes "heureusement" pas dans ma tête.

Merci pour ton écoute

[AnyChart] Créer une barre d'objectif

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager