Discussion :

[Asby2910]

Bonjour,
je suis tout nouveau du le forum et aussi assez débutant en programmation web. Malgré que je connais les bases et quelques astuces à force d'écumer les diverses forum, je n'arrive pas à trouver de réponse qui pourrait convenir.
Voilà mon problème:
Je souhaite faire un camembert avec de nombreux secteurs (44!) égaux, qui pourront par la suite être cliquable et changer de couleur au passage de la souris (ce qui sera fait par la suite en js il me semble!).
Ce cercle aura pour but la saisie d'heure de manière rapide et simple pour l'utilisateur: je met en pièce jointe ce que je voudrais obtenir


Merci d'avance!

[CCyrillus]

Bonjour,
cherches tu a faire ça en CSS ou via l'aide de preprocesseur ?
cherches tu a faire ça sur un image map et area ou des liens et avec ous sans preprocesseur ?

En gros: qu'as tu commencé a faire ou essayer ?

[rodolphebrd]

Bonjour,

Sur google il y a pas mal de sources :
http://www.highcharts.com/demo/pie-basic
http://www.amcharts.com/javascript-charts/3d-donut/
http://raphaeljs.com/pie.html

[Asby2910]

Merci pour vos réponse, mais alors comme je vous l'ai dit je suis loin d'être expert dans les différents langages (devant même aller chercher la définition de préprocesseur ..que je n'utilise donc pas pour le coup!)
Sinon, je ne savais pas trop sur quoi partir, j'ai ainsi fait les schéma sous Inkscape, mais qui me parait compliqué a exporter et a faire toute mes sections de manière égale. J'étais donc ensuite parti pour les faire en CSS mais là encore ça me paraît ultra compliqué à faire pour pas grand chose (sachant qu'un problème de superposition des div va probablement se poser lorsque l'on cliquera sur le bord d'une section). Je ne sais pas trop quoi choisir comme langage donc...
D'après les liens de rodolph, le js à l'air plus adapté, je vais étudier ça.

(Désolé pour le pavé )

[Asby2910]

Ton deuxième lien rodolph (http://www.amcharts.com/javascript-charts/3d-donut/ ) à l'air de convenir très bien à ce que je recherche, Mais comment pouvoir obtenir un rendu un peu similaire? je suis un peu perdu au milieu de tout son code .. De plus il a visiblement utilisé du svg que je ne connais pas vraiment ..
Je sollicite encore votre aide pour m'éclairer svp

[rodolphebrd]

Il suffit juste de copier le code et les fichiers externes et d'adapter le tout à ses besoins.
Les paramètres principaux sont gérés ici (c'est pas bien difficile à comprendre) :

Code javascript :

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
var chart;
 
var chartData = [
    {
        "secteur": "secteur rouge",
        "visits": 900
    },
    {
        "secteur": "secteur orange",
        "visits": 900
    },
    {
        "secteur": "secteur orange clair",
        "visits": 900
    },
    {
        "secteur": "secteur jaune foncé",
        "visits": 900
    },
    {
        "secteur": "secteur jaune",
        "visits": 900
    },
    {
        "secteur": "secteur vert clair",
        "visits": 900
    },
    {
        "secteur": "secteur vert",
        "visits": 900
    },
    {
        "secteur": "secteur bleu",
        "visits": 900
    }
];
 
 
AmCharts.ready(function () {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
 
    chart.dataProvider = chartData;
    chart.titleField = "secteur";
    chart.valueField = "visits";
    chart.sequencedAnimation = true;
    chart.startEffect = "elastic";
    chart.innerRadius = "30%";
    chart.startDuration = 2;
    chart.labelRadius = 15;
    chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
    // the following two lines makes the chart 3D
    chart.depth3D = 30;
    chart.angle = 29;
 
    // WRITE                                 
    chart.write("chartdiv");
});

Un peu comme ça : http://codepen.io/anon/pen/yDFhm

Pour modifier plus de paramètres comme ajouter un secteur, c'est un peu plus compliqué et il faut, je pense, consulter le site référent (et étudier le langage javascript).

Attention aux conditions d'utilisation de ces outils.

[Asby2910]

D'accord Rodolph, merci.
En effet il va falloir que je rajoute des secteurs, (il m'en faudra 44 au total) avec la propriété suivante, qui est que tout les secteurs soit d'une couleur unie initialement et qu'au passage de la souris il prennent les couleur d'une activité que l'on a sélectionné.
Cela te parait envisageable aux vues de mes faibles connaissances en js?

[rodolphebrd]

Sinon il y a la possibilité de travailler avec des images et de jouer sur la position des background comme sur l'exemle suivant :
http://ago.tanfa.co.uk/css/examples/europe-map.html
Obtenu avec la carte image suivante:

...et le code CSS suivant :

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
#europe {
 width: 306px;
 height: 326px;
 background: url(europe2.gif) no-repeat;
 margin: 10px auto; padding: 0;
 position: relative;
 border: 2px solid #999;
}
#europe li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
 
#europe a {display: block; text-indent: -9999px; text-decoration: none;}
 
#uk {left: 95px; top: 7px; width: 68px; height: 118px; z-index: 40;}
#ire {left: 61px; top: 46px; width: 49px; height: 47px;}
#sp {left: 26px; top: 187px; width: 127px; height: 108px;}
#fr {left: 81px; top: 116px; width: 134px; height: 133px;}
#de {left: 186px; top: 72px; width: 80px; height: 108px;}
#it {left: 187px; top: 176px; width: 114px; height: 143px;}
#sz {left: 182px; top: 167px; width: 41px; height: 25px;}
#aus {left: 209px; top: 153px; width: 77px; height: 35px;}
#swe {left: 225px; top: 0px; width: 68px; height: 73px;}
#nor {left: 199px; top: 0px; width: 50px; height: 38px;}
#den {left: 214px; top: 38px; width: 35px; height: 45px;}
 
 
#uk a {height: 118px;}
#ire a {height: 47px;}
#sp a {height: 108px;}
#fr a {height: 133px;}
#de a {height: 108px;}
#it a {height: 143px;}
#sz a {height: 25px;}
#aus a {height: 35px;}
#swe a {height: 73px;}
#nor a {height: 38px;}
#den a {height: 45px;}
 
.buk #uk a, #uk a:hover {background: url(europe2.gif) -95px -333px no-repeat;}
.bire #ire a, #ire a:hover {background: url(europe2.gif) -61px -699px no-repeat;}
#sp a:hover {background: url(europe2.gif) -26px -513px no-repeat;}
#fr a:hover {background: url(europe2.gif) -81px -769px no-repeat;}
#de a:hover {background: url(europe2.gif) -186px -398px no-repeat;}
#it a:hover {background: url(europe2.gif) -187px -502px no-repeat;}
#sz a:hover {background: url(europe2.gif) -182px -1145px no-repeat;}
#aus a:hover {background: url(europe2.gif) -209px -806px no-repeat;}
#swe a:hover {background: url(europe2.gif) -225px -326px no-repeat;}
#nor a:hover {background: url(europe2.gif) -199px -978px no-repeat;}
#den a:hover {background: url(europe2.gif) -214px -691px no-repeat;}

[Asby2910]

Bonjour, et merci pour tes propositions encore une fois rodolph
Alors j'ai réussi a faire en css a peu prêt ce que je voulais en créant mes 44div, puis en appliquant une rotation sur chacune de 360/Nb de div, et l'arrondi que j'ai calculé avec le périmètre, puis en écartant tout les div du centre.. bref un peu laborieux il devait y avoir bien plus simple mais j'obtiens au moins un truc potable.
voici donc mon CSS:

Code css :

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
.prems { 
  position:absolute;
  z-index: 50;
  width:10.71px;
  height:15px;
  margin-left:50%;
  margin-top:middle;
  display:inline-block;
  /*float:left;  préferer le inline-block*/
  vertical-align:;
  border:1px solid red;
  border-radius:3.4px;
  border-top-left-radius:3.4px;
  border-top-right-radius:3.4px;
  border-bottom-left-radius:3.4px;
  border-bottom-right-radius:3.4px;
  transform-origin: 00% 500%;
}
 
#prems2{
  transform:rotate(8.18deg);
  z-index:51;
}
 
#prems3{
  transform:rotate(16.36deg);
  z-index:52;
}

(les div prems vont jusqu'a la 44ème!)

et une parti du html:

Code html :

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

1
2
3
<div id="prems1" class="prems"></div>
  <div id="prems2" class="prems"></div>
  <div id="prems3" class="prems"></div>

Rien de bien impressionnant mais ça a la forme voulue.
Maintenant je voudrais rendre mes div cliquables, et les grossirs à leur survol. Une petit idée pour m'aiguiller?

[rodolphebrd]

Bonjour,

pour les rendre cliquable il suffit d'utliser la balise a et pour les grossir la propriété transform :scale parait appropriée:

Code html :

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

1
2
3
4
5
<div class="box"> 
<a href="" class="sect pos1"></a> 
<a href="" class="sect pos2"></a> 
<a href="" class="sect pos3"></a> 
</div>

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
.box {position:relative;}
a {display:block;}
.sect {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	-webkit-transition: all 0.2s ease-in-out;
}
.pos1 {border-top: 80px solid blue;}
.pos2 {
	border-top: 80px solid green;
	position:absolute;
	top:5px;
	left:20px;
	-webkit-transform:rotate(28deg);	
}
.pos2:hover {
	border-top-color:  orange;
	 -webkit-transform: scale(2) rotate(28deg);
	 top:-32px;
	 left:40px;
	 z-index:100;
}
.pos3 {
	border-top: 80px solid red;
	position:absolute;
	top:18px;
	left:35px;
	-webkit-transform:rotate(56deg);
}

Le survol n'est appliqué qu'au deuxième secteur : http://codepen.io/anon/pen/oDaBt

[CCyrillus]

un preprocesseur serait bien utile , un fork d'un pen de anna tudor :

http://codepen.io/anon/pen/nrfAG

en cliquant sur HAML ou SCSS tu peut voir le code HTML et CSS généré si cela t'inspire.

Malgre tout une image map et du javascript pour modifier/changer l'image sera compatible avec les vieux navigateurs. (voir http://www.image-maps.com/ nouvelle interface à voir)

Les transform:rotate skew ou matrix le seront difficilement , les vieux IE ont bien des activex dont un similaire a matrix, mais ça va être laborieux pour 44 liens (et pas 60?)
http://www.useragentman.com/IETransformsTranslator/ test dedans par exemple matrix(1,-1.655,0,1,0,0)
tu as ceci aussi http://css3please.com/#box_matrix

++

[rodolphebrd]

CCyrillus : l'utilisation des préproc est certes judicieuse dans ce cas mais notre ami n'a pas les bases suffisantes en CSS pour passer à cela.

Ton codepen ne s'affiche pas chez moi

On en revient à ma réponse 8 qui parait être appropriée pour un résultat moins chronophage et plus compatible.

[Asby2910]

Bonjour,
Alors rodolph, j'ai essayé le scale qui n'avait pas marché chez moi, dû surement à la rotation des div, soit ça me donnait un truc bizarre ou ça me replaçait la div a perpet' donc j'ai abandonné l'idée pour l'instant .. (après j'ai pu me foirer un peu dessus probablement )

Sinon, Ccyrillus ta solution est nickel, c'est quelque chose comme ça que je voudrais obtenir mais à regarder le code ça me paraît en effet assez complexe!
Je vais essayer de m'y intéresser quand même pour comprendre ^^

[rodolphebrd]

Je vais essayer de m'y intéresser quand même pour comprendre ^^

Vous n'avez nullement besoin d'apprendre le langage des préprocesseurs car il vous suffit d'inspecter le (pavé de) code à partir de l'exemple que vous souhaitez exploiter.

[CCyrillus]

par exemple : http://codepen.io/anon/pen/Jhylf en copiant le code générer : http://codepen.io/anon/pen/hqjyx

@rodolphebrd effectivement, codepen semble avoir du mal avec HAML et SCSS , difficile de rafraichir ou afficher le rendu.

++

[rodolphebrd]

CCyrillus