Raphael.js et comportement diff�rent avec variable GET

**oraya** · 10/11/2015, 13h15

Bonjour

J'ai r�cemment d�couvert l'API Raphael.js qui permet de tracer des diagrammes facilement et j'ai voulu la tester.
Seulement voila, je suis tomb� sur une buche et j'arrive vraiment pas � comprendre d'o� viens le probl�me

Grosso modo, pour le m�me page (strictement la m�me d'un point de vue HTML), j'ai un comportement diff�rent si une variable $_GET est d�finie ou non...

Sans plus attendre, un exemple en screenshot :
http://imgur.com/HGNgJGT
http://imgur.com/0YnSp1Q

Voici le code de cette page:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta ttp-equiv="Content-Type" content="text/html" charset="utf-8">
	</head>
	<body>
		<?php if(isset($_GET['page'])) {include 'includes/wtf.php';} else {include 'includes/wtf.php';}?>
	</body>
</html>

le code de wtf.php:

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
 
<div>
	<script src="js/Raphael.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js" charset="utf-8"></script>
	<script src="js/pie.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
 
		    var values = [],
		        labels = [];
		    $("tr").each(function () {
		        values.push(parseInt($("td", this).text(), 10));
		        labels.push($("th", this).text());
		    });
		    $("table").hide();
 
		    Raphael("holder", 600, 500).pieChart(300, 170, 100, values, labels, "#000");
		});
	</script>
 
	<table>
		<tbody>
		<tr>
			<th scope="row">Test</th>
			<td>56%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>33%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>10%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>1%</td>
		</tr>
		</tbody>
	</table>
	<center><div id="holder"></div></center>
</div>
 
<style media="screen">
    #holder {
    	border: 1px solid rgb(150, 203, 0);
        width: 600px;
        height: 350px;
    }
</style>

et pie.js:

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
 
Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .75, 1),
                ms = 500,
                delta = 30,
                bcolor = Raphael.hsb(start, 1, 1),
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 3}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-size": 20});
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
                txt.stop().animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                txt.stop().animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

Si ya besoin de Raphael.js, je peut donner le code, mais c'est le m�me que celui t�l�chargeable sur le site officiel (http://raphaeljs.com/)

J'ai d'abord pens� que c'�tait d� � un probl�me de caract�res mais aparemment non (ou alors il est bien cach�).
Le probl�me se situe au niveau du "if" en PHP. Si je l'enleve et que je met simplement un "include", �a fonctionne sans probl�me.
Mais bon, j'ai besoin de cette condition

Et franchement, je suis comprend vraiment pas en quoi une variable $_GET en plus ou en moins changerais le comportement d'un script Javascript

Suis-je le seul, ou quelqu'un d'autre obtient le m�me probl�me ?
Merci de votre aide

PS: Pour les modos, si je ne suis pas dans le bon forum je m'en excuse

Je me suis dit que vu que le comportement change au niveau Javascript, il fallait que je m'adresse ici

**NoSmoking** · 10/11/2015, 20h33

Bonjour,
on peut s'interroger sur l'utilit� d'un tel code

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
<?php
if (isset($_GET['page'])) {
    include 'includes/wtf.php';
} else {
    include 'includes/wtf.php';
}
?>

Regarde le code HTML g�n�r� (ctrl + U) il devrait surement t'apporter des informations.

**oraya** · 12/11/2015, 09h07

Oui en effet, ce code est strictement inutile. Mais je l'ai �crit uniquement pour mettre en �vidence ce probl�me.
Si j'ai besoin de cette condition, c'est en fait pour g�n�rer du contenu dynamique en fonction d'une variable GET. L'ennui, c'est que je ne peux pas mettre cette page en dynamique justement � cause de ce probl�me. Et c'est emb�tant car j'aimerai ne pas avoir � sortir de cette m�canique.
Comme je l'ai dit, le code HTML est strictement le m�me, c'est �a qui est �trange...

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
 
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta ttp-equiv="Content-Type" content="text/html" charset="utf-8">
	</head>
	<body>
		<div>
 
	<script src="js/Raphael.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js" charset="utf-8"></script>
	<script src="js/pie.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
 
		    var values = [],
		        labels = [];
		    $("tr").each(function () {
		        values.push(parseInt($("td", this).text(), 10));
		        labels.push($("th", this).text());
		    });
		    $("table").hide();
 
		    Raphael("holder", 600, 500).pieChart(300, 170, 100, values, labels, "#000");
		});
	</script>
 
	<table>
		<tbody>
		<tr>
			<th scope="row">Test</th>
			<td>56%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>33%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>10%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>1%</td>
		</tr>
		</tbody>
	</table>
	<center><div id="holder"></div></center>
 
</div>
 
<style media="screen">
    #holder {
    	border: 1px solid rgb(150, 203, 0);
        width: 600px;
        height: 350px;
    }
</style>	</body>
</html>

Je ne l'ai pas pr�cis�, mais si �a peux �tre utile je suis sur Mac OS X Yosemite et je d�veloppe sur Chrome (derniere version)

**NoSmoking** · 14/11/2015, 17h45

Il n'y a aucune raison que cela soit diff�rent entre les 2 appels si le HTML rendu est le m�me.

**oraya** · 16/11/2015, 09h57

Tout � fait d'accord, c'est pour �a que je trouve �a bizarre xD

**NoSmoking** · 16/11/2015, 20h57

Le mieux serait quand m�me de disposer d'une page test en ligne reproduisant ce ph�nom�ne.

**oraya** · 17/11/2015, 09h27

Bonjour,

Ce ne sera pas necessaire ^^

J'ai un ami qui a trouv� la source du probl�me dans le code de l'API Raphael.js.
Il s'agit en fait d'un ligne de code (ligne 5934) o� pour remplir une section, il fait appel a une ressource par URL (surement pour g�n�raliser et permettre d'aller chercher qqchose sur un autre site). Seulement voila, pour aller chercher cette ressource, il r�cup�re la valeur de l'url via l'instruction document.location.origin + document.location.pathname ce qui omet d'inclure d'�ventuelles variables. Le lien n'�tant pas bon il ne peut donc aller chercher cette ressource.

Je pense que mon explication est hyper bancale

Mais bon vu que j'ai pas tout compris ce qu'on m'a expliqu�, c'est le mieux que je puisse dire

Par la suite on a trouv� ce bug dans la liste des probl�mes identifi�s sur le projet GitHub :
https://github.com/DmitryBaranovskiy/raphael/issues/999

il suffit donc simplement de changer cette instruction et le tour est jou� ^^
Dans la version compl�te de l'API, il faut regarder ligne 5934

Merci quand m�me � toi NoSmoking pour t'�tre pench� sur cette histoire

A la prochaine !

**NoSmoking** · 17/11/2015, 22h14

Merci � toi pour ce retour

Raphael.js et comportement diff�rent avec variable GET

JavaScript

Discussions similaires

Partager

Partager