Réalisez un histogramme avec CSS

Salut,

Ce tutoriel, qui est une traduction de Pure Css Data Chart de Alen Grakalic,
vous explique comment réaliser, sans utiliser flash ou autres, un simple graphique de données.

N'hésitez pas à lui faire part de vos remarques, suggestions et questions dans cette discussion.

Bonne lecture à tous.

Bonjour,

je n'ai pas vu la déclaration qui permet de mettre les couleurs en arrière plan. Est-ce normal ? J'ai vu que les couleurs d'arrière plan des bargraphes sont des images .gif

Merci pour l'info

++

Elle y est. C'est toi qui n'a pas vu...Si tu parles bien de la zone blanche et grise elle est définie dans le dl ;)

Non, il parle des lignes de couleur ... ce tutoriel est incomplet et utilise des images pour chaque couleur rouge vert orange et bleu.

Donc il manque l'intégration de ces images dans le css
et les images devraient être téléchargeables idéalement faire un zip sinon on peut faire enregistrer-sous de chaque couleur en utilisant le lien vers exemple.

Sur le site officiel du tutoriel on peut télécharger le kit au complet et fonctionnel.
http://cssglobe.com/lab/csschart/csschart.zip

Je suis tombé sur une adaptation avec javascript:
http://www.mausonio.com/posts/not-so...ss-data-chart/

Citation:

---

Envoyé par lenaqc

Non, il parle des lignes de couleur ... ce tutoriel est incomplet et utilise des images pour chaque couleur rouge vert orange et bleu.

---

C'est pas la traduction mais le tutoriel original. Je rappelle qu'une traduction n'est pas la modification de l'article dans notre langue.

Citation:

---

Donc il manque l'intégration de ces images dans le css
et les images devraient être téléchargeables idéalement faire un zip sinon on peut faire enregistrer-sous de chaque couleur en utilisant le lien vers exemple.

Sur le site officiel du tutoriel on peut télécharger le kit au complet et fonctionnel.
http://cssglobe.com/lab/csschart/csschart.zip

---

Je rajouterai sur l'article français le lien.

Sinon pour répondre à la question initiale, il faut définir des classes CSS contenant l'image. Exemple:

Code:

---

1 2 3

dl#csschart span.type2 { background:transparent url(type2.gif) repeat-y 0 0; }

---

et l'appliquer à la balise span