Améliorer mon Graphe qui reprend 3 crédits en les superposant.

**guillaumeIOB** · 19/11/2017, 15h47

Bonjour a tous,

J'essaie en vain de mettre au point un script qui me permette de superposer 3 crédits sur un seul graph et j'y suis presque, sauf que je galère depuis 3 jours pour le finaliser, et je n'ai plus les yeux en face des trous a force de modifications.

Voici mon 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
80
 
                                    <canvas width="400" height="300" style="max-width:80%" id="canvasLissage"></canvas>
                                    <script>
                                    function CalculM1(idA) {
 
                                     Tptz=0.000000000000000000000000000000001; //Taux du taux 0
				     Mptz=92000; // Montant du Pret a taux 0
                                     Nptz_diff=5; // le pret a taux 0 commence dans 5ans
                                     Nptz_amort=20; // le pret a taux 0 duree 20ans
                                     Mptz=500; // Mensualité du pret a taux 0
 
                                     El=200000; // Montant du Pret 1
                                     Tl=2; // Taux du Pret 1
                                     Nl=25; // Durée du Pret 1
				     //=> Ml = 848
 
                                     Ec=25000;// Montant du Pret 2
                                     Tc=6; // Taux du Pret 2
                                     Nc=10; // Durée du Pret 2
                                     //=> Mc = 278
 
				     // Calcul de la mensualité du Pret 1
				     M1 = El*(Tl/100)/(1-Math.pow((1+Tl/100/12),(-(Nl*12))))/12; 
				     M1=Math.floor(M1*100)/100;
 
				     // Calcul de la mensualité du Pret 2
				     Mc=Ec*(Tc/100)/(1-Math.pow((1+Tc/100/12),(-(Nc*12))))/12; 
				     Mc=Math.round(Mc*100)/100;
 
                                     GraphLissage(Mc,Nc,M1,Nl,Mptz,Nptz_diff,Nptz_amort,idA);
                                    }
 
                                    function GraphLissage(Mc,Nc,M1,Nl,Mptz,Nptz_diff,Nptz_amort,idA) {
                                      M2=M1+Mc+Mptz;
 
                                      Width=document.getElementById("canvasLissage").width;
                                      Height=document.getElementById("canvasLissage").height;
                                      cnvlss = document.getElementById("canvasLissage");
                                      ctxlss = cnvlss.getContext("2d");
                                      ctxlss.fillStyle="white";
                                      ctxlss.fillRect(0,0,Width,Height);
 
                                      ctxlss.fillStyle="black";
                                      ctxlss.beginPath();
                                      ctxlss.moveTo(10,Height-20);ctxlss.lineTo(Width-4,Height-20);
                                      ctxlss.stroke();
                                      ctxlss.beginPath();ctxlss.moveTo(Width-12,Height-25);
                                      ctxlss.lineTo(Width-4,Height-20);ctxlss.lineTo(Width-12,Height-15);
                                      ctxlss.stroke();
                                      ctxlss.beginPath();
                                      ctxlss.moveTo(20,Height-10);ctxlss.lineTo(20,10);
                                      ctxlss.stroke();
                                      ctxlss.beginPath();ctxlss.moveTo(15,18);
                                      ctxlss.lineTo(20,10);ctxlss.lineTo(25,18);
                                      ctxlss.stroke();
 
                                      Mx=Width-40;
                                      ctxlss.fillStyle="blue";
                                      ctxlss.fillRect(20,40,Mx*Nc/Nl,M1/M2*(Height-60));
                                      ctxlss.fillRect(20+Mx*Nc/Nl , 40 ,Width-(20+Mx*Nc/Nl)-20 ,(Height-60));
 
                                      ctxlss.fillStyle="green";
                                      ctxlss.fillRect(20,40+M1/M2*(Height-60),Mx*Nptz_amort/Nl,Mptz/M2*(Height-60));
 
                                      ctxlss.fillStyle="magenta";
                                      ctxlss.fillRect(20,40+M1/M2*(Height-60),Mx*Nc/Nl,Mc/M2*(Height-60));
 
                                      ctxlss.font="8pt Calibri,Geneva,Arial";
                                      ctxlss.fillStyle="black";
                                      ctxlss.fillText(Nptz_amort,Mx*Nptz_amort/Nl,Height-5);
                                      ctxlss.fillText(Nc,Mx*Nc/Nl,Height-5);
                                      ctxlss.fillText(Nl,Mx-5,Height-5);
                                      ctxlss.textAlign="left"; 
                                      ctxlss.fillText(Math.round(Mc),0,40+M1/M2*(Height-60));
                                      ctxlss.fillText(Math.round(Mptz),0,35+M1/M2*(Height-60));
                                      ctxlss.fillText(Math.round(M1),0,30);
 
                                    }
                                    CalculM1(idA);
                                    </script>

Voila ce que j'obtiens et voila ce que j'aimerai obtenir.

http://iobnet.com/testG.php

Merci à tous pour votre aide et excellent dimanche.
Olivier

**mathieu** · 19/11/2017, 16h49

Je n'ai pas complètement compris le rapport entre les valeurs de départ et le résultat que vous souhaitez obtenir.
Par exemple la variable Mptz=500, vous marquez "Mensualité du pret a taux 0" mais ensuite sur l'image souhaitez, la mensualité à l'air d'être de 278.
Et pour le prêt 2, la zone rose est plus petite de 5 à 10 ans ? Cela veut dire que les mensualités du prêt 2 sont plus petites de 5 à 10 ans ?

**guillaumeIOB** · 19/11/2017, 16h58

Bonjour et merci pour commencer de tenter de m'aider.

Oui vous avez raison, j'ai interverti les valeurs,

Je viens de remettre la bonne image.

Oui je souhaite que le PTZ demarre a 5 (date de début) .. ce n'est pas une date fixe evidemment et se termine 20ans plus tard soit a 25ans puisque j'ai mis une date d'entrée a 5 et de sortie a 20

Merci de votre aide
Olivier

**mathieu** · 19/11/2017, 17h22

Envoyé par mathieu

Et pour le prêt 2, la zone rose est plus petite de 5 à 10 ans ? Cela veut dire que les mensualités du prêt 2 sont plus petites de 5 à 10 ans ?

La question tient toujours pour le prêt à taux 0 : entre 5 et 10 ans la mensualités est plus petit ou alors c'est juste le rectangle vert qui se trouve derrière la zone rose ?

la 1re étape est déjà de vérifier le contenu des variables intermédiaires, M1 et Mc. Est ce que ces valeurs sont correctes ?

pour la 2e étape je vous conseille de définir des variables qui serviront à dessiner, par exemple

Code :

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

1
2
3
4
5
6
7
  var margeHaut = 40;
  var margeBas = 20;
  var margeGauche = 20;
  var margeDroite = 20;
 
  var largeurInterieure = Width - margeGauche - margeDroite;
  var hauteurInterieure = Height - margeHaut - margeBas;

comme cela, au lieu d'indiquer "ctxlss.fillRect(20, 40, ..." vous marquerez "ctxlss.fillRect(margeGauche, margeHaut," ce qui vous aidera déjà mieux à voir ce que fait chaque ligne de code

**guillaumeIOB** · 19/11/2017, 17h33

Le pret a tx 0 est effectivement le carré vert.

Comme il commence a l'année 5, de 0 a 5 il est égal a 0euros et de 5 a (5+20) il est a 500.

J'ai commencé a réorganiser mes lignes de cette façon pour reprendre mes calculs mais je n'arrive pas ..grrrrr

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
ctxlss.fillStyle="blue";
 xx=20; yy=40;
 larg=Mx*Nc/Nl;
 haut=M1/M2*(Height-60);
    ctxlss.fillRect(xx,yy,larg,haut);
 
xx=20+Mx*Nc/Nl; yy=40;
 larg=Width-(20+Mx*Nc/Nl)-20;
 haut=(Height-60);
    ctxlss.fillRect(xx,yy,larg,haut);
 
ctxlss.fillStyle="green";
 xx=20; yy=40+M1/M2*(Height-10);
 larg=Mx*Nptz_amort/Nl;
 haut=Mptz/M2*(Height-10);
    ctxlss.fillRect(xx,yy,larg,haut);
 
ctxlss.fillStyle="magenta";
 xx=20; yy=40+M1/M2*(Height+10);
 larg=Mx*Nc/Nl;
 haut=Mc/M2*(Height-60);
  ctxlss.fillRect(xx,yy,larg,haut);

Merci encore

**mathieu** · 19/11/2017, 17h40

il y a un soucis avec la valeur M2, vous additionnez les différentes mensualités mais ensuite je pense que cette valeur ne sert pas pour les dessins.

à partir des variables que j'ai indiqué dans l'autre message, les rectangles rose et vert se dessinent avec ce 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
 
    ctxlss.fillStyle = "green";
    ctxlss.fillRect(
          margeGauche + (Nptz_diff / Nl) * largeurInterieure
        , margeHaut + hauteurInterieure - (Mptz / M1) * hauteurInterieure
        , (1 - Nptz_diff / Nl) * largeurInterieure
        , (Mptz / M1) * hauteurInterieure
    );
 
    ctxlss.fillStyle = "magenta";
    ctxlss.fillRect(
          margeGauche
        , margeHaut + hauteurInterieure - (Mc / M1) * hauteurInterieure
        , (Nc / Nl) * largeurInterieure
        , (Mc / M1) * hauteurInterieure
    );

**guillaumeIOB** · 19/11/2017, 18h06

Merci de votre aide, avec d'autres modifs j'y suis arrivé. Excellente soirée a vous.

Améliorer mon Graphe qui reprend 3 crédits en les superposant.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager