Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:javascript:chartjs [15/05/2026 14:07] – Plugin: Aligner les zéros des axes Y cyrille
+++ informatique:javascript:chartjs [15/05/2026 14:12] (Version actuelle) – cyrille
@@ Ligne 8: / Ligne 8: @@
 ===== Plugins =====
-==== Aligner les zéros des axes Y ====
+==== AlignZero ====
+Aligner les zéros des axes Y.
 <code javascript>
@@ Ligne 71: / Ligne 73: @@
 </code>
+==== Crosshair ====
+Ligne de viseur (crosshair) sur toute la hauteur de l'axe Y.
+<code javascript>
+/**
+ * Plugin pour afficher une ligne de viseur (crosshair) verticale sur le graphique.
+ * Ce plugin permet de visualiser plus facilement les valeurs des données en traçant
+ * une ligne verticale qui suit le mouvement de la souris.
+ *
+ * Fonctionnement :
+ * 1. Initialise un objet crosshair dans le contexte du graphique pour suivre la position X
+ * 2. Écoute les événements de la souris (mousemove et mouseout)
+ * 3. Dessine une ligne verticale à la position actuelle de la souris lors du survol
+ * 4. Supprime la ligne lorsque la souris quitte la zone du graphique
+ *
+ * La ligne de viseur est dessinée avec une opacité réduite pour ne pas masquer les données
+ * et s'étend sur toute la hauteur de l'axe Y du graphique.
+ */
+const crosshairPlugin = {
+  id: 'customCrosshair',
+  afterInit(chart) {
+    chart.crosshair = { x: null };
+  },
+  afterEvent(chart, { event }) {
+    if (!chart.crosshair) chart.crosshair = { x: null };
+    if (event.type === 'mousemove') {
+      chart.crosshair.x = event.x;
+      chart.draw();
+    } else if (event.type === 'mouseout') {
+      chart.crosshair.x = null;
+      chart.draw();
+    }
+  },
+  afterDraw(chart) {
+    if (!chart.crosshair || chart.crosshair.x == null) return;
+    const y = chart.scales.y;
+    if (!y) return;
+    const ctx = chart.ctx;
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(chart.crosshair.x, y.top);
+    ctx.lineTo(chart.crosshair.x, y.bottom);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(0,0,0,0.4)';
+    ctx.stroke();
+    ctx.restore();
+  }
+};
+</code>