causeimyourfat / cartes / graph
Un radar
qu'on peut corriger
Comparer des profils sur les mêmes axes, ça se fait en radar. Mais un radar sorti d'un tableur n'est jamais présentable : on ne peut ni renommer un axe, ni changer une graisse, ni sortir un PNG propre. Ici tout est éditable, puis ça s'exporte.
Ce que c'est
30 secondesLe geste
5 minutesOn entre par la grille, on sort par le PNG. Entre les deux, tout ce qui se voit se règle.
- 1 · la grille+ Ligne / + ColonneLes axes sont les lignes, les séries sont les colonnes. On dimensionne d'abord, on remplit ensuite.
- 2 · le titreRéglages du titreTexte, police, taille, graisse, couleur. Cinq familles disponibles — celles qui existent partout, pas des polices à charger.
- 3 · les sériesRéglages de la légendeCouleur, couleur de bordure, épaisseur, rayon des points, série par série.
- 4 · les axesRéglages des compétencesLe libellé de chaque axe et le maximum de l'échelle. Un radar dont l'échelle bouge ne compare plus rien : c'est le réglage le plus important de la page.
- 5 · la sortieExport ou ImpressionPNG via le canvas, ou impression directe. Rien ne part sur un serveur.
Tout se passe dans le navigateur. Aucune donnée saisie ne quitte la machine — il n'y a même pas d'appel réseau après le chargement de la page.
La structure
15 minutesLe canvas
Un seul <canvas id="spider-chart"> piloté par Chart.js. Le radar est redessiné à chaque réglage, pas retouché.
Trois panneaux
Titre, légende (séries), axes (compétences). Un sélecteur choisit la cible, les champs s'appliquent à elle — au lieu de trente champs empilés.
L'export
toDataURL('image/png') : l'image sort du canvas tel qu'il est affiché. Ce qu'on voit est ce qu'on colle dans le document.
L'impression
window.print() — pour glisser le radar dans un dossier papier sans passer par une capture d'écran.
Un graphique n'a d'intérêt que s'il finit dans un document. L'outil ne cherche pas à être un tableur : il cherche à produire une image propre, à la bonne échelle, avec les bons mots — et à s'arrêter là.
yellowgreen-kangaroo · page uniqueCe que ça ne fait pas
- Pas de sauvegarde de session : on ferme l'onglet, la grille repart de zéro. C'est un outil de sortie, pas un classeur.
- Chart.js est chargé depuis un CDN : hors ligne, la page ne dessine pas.
- Cinq familles de police, volontairement — celles qui rendent pareil chez tout le monde.