60FOLDCOMPONENTS

Options de graphique partagées

Options et contrôles d'exécution disponibles à la fois sur les graphiques en ligne et les graphiques boursiers.

LineChartOptions et StockChartOptions incluent les mêmes contrôles d'interaction, d'axes, d'étiquettes, de superpositions, de fenêtre d'affichage et de rendu. Vous ne construisez pas un graphique de base ni n'importez un moteur de rendu interne.

Utilisez la référence Options Line ou Options Stock pour les champs exacts. Les méthodes d'exécution partagées apparaissent directement sur LineChart et StockChart.

Groupes de construction

Rendu et interaction

  • renderMode sélectionne auto, worker ou main. Lisez le résultat réel avec getRenderMode().
  • rendererInitializationTimeout limite le temps de démarrage du renderer en millisecondes. Sa valeur par défaut est de 15 000 ms, commence à la construction et peut être réglée sur 0 pour désactiver le watchdog.
  • interactive: false désactive le pan, le zoom, le pincement et la sélection tout en préservant les informations de survol.
  • minViewportRange limite le zoom en unités de données X.
  • yDomain: { min, max } fixe un ou les deux bords du domaine Y lors du zoom, des changements de LOD et des mises à jour en streaming ; les bords omis restent mis à l'échelle automatiquement.
  • wheelZoomSpeed, wheelZoomDirection, keyboardZoomSpeed et keyboardPanSpeed ajustent la navigation.
  • keyboardActivation choisit le contrôle clavier basé sur le focus ou sur le survol.
  • keyboardAnnouncements localise les messages d’état polis émis après panoramique, zoom, réinitialisation et annulation de sélection via le clavier ; son modèle optionnel viewport accepte {startPercent}, {endPercent} et {spanPercent}. Définissez‑le sur false lorsque l’hôte fournit un retour équivalent.
  • animated contrôle les révélations de données et les transitions de viewport/axes. Lorsqu’il est omis, prefers-reduced-motion: reduce désactive l’animation et les modifications de cette préférence sont observées tant que le graphique reste monté. Un true ou false explicite reste prioritaire.

Contenu Canvas

grid, axis, chartBackground, rangeSelector, tooltip, crosshairStyle, selection, labels, overlay, padding et textDirection fonctionnent de la même façon sur les graphiques en courbes et les graphiques boursiers.

La typographie des graphiques utilise par défaut la DEFAULT_CHART_FONT_FAMILY exportée, une pile d’instruments privilégiant SFMono. Les champs family par surface restent faisant foi.

Utilisez un domaine entièrement fixe lorsque l’affichage en direct doit préserver l’échelle visuelle au lieu de suivre chaque nouvel extrême :

const chart = new LineChart(canvas, {
  yDomain: { min: 0, max: 100 },
});

yDomain est désactivé par défaut. Il est partagé par les graphiques en courbes et boursiers et s’applique de manière cohérente au rendu en worker, sur le thread principal et en SSR.

Contrôles de la fenêtre d’affichage

const current = chart.getViewport();

chart.setViewport(
  { xMin: current.xMin + 60_000, xMax: current.xMax - 60_000 },
  { animated: true },
);

chart.reset({ animated: true });

Les bords de la fenêtre d’affichage omis conservent leur valeur actuelle. Les plages sont normalisées par rapport à l’étendue complète des données et au minViewportRange du graphique.

Apparence à l’exécution

Les comportements définis uniquement à la construction et l’apparence modifiable sont volontairement séparés. getOptions() renvoie l’instantané complet normalisé. getAppearance() renvoie uniquement les champs qui peuvent être modifiés en toute sécurité à l’exécution. Les deux valeurs sont typées comme des instantanés DeepReadonly ; les objets simples et les tableaux imbriqués sont copiés. Appliquez donc les modifications via les méthodes d’exécution plutôt que de modifier les valeurs renvoyées.

chart.updateAppearance({
  chartBackground: "#081018",
  grid: { color: "rgba(130, 180, 220, 0.16)" },
  axis: { bottom: { labelFont: { color: "#a9bac9" } } },
});

Les correctifs sont fusionnés dans l'apparence actuelle. setLabels() et setOverlay() asynchrone sont des méthodes de commodité axées sur le même état.

Regroupez les modifications synchrones lorsqu'une action utilisateur met à jour plusieurs propriétés :

chart.batch(() => {
  chart.updateAppearance({ grid: { color: "#26384a" } });
  chart.setViewport({ xMin, xMax });
});

Ne pas appeler await à l'intérieur de batch ; seules les appels synchrones effectués avant que le rappel ne retourne sont fusionnés.

Infobulles

L’infobulle intégrée est rendue avec Canvas2D. tooltip.onRender s’exécute sur le thread principal et peut remplacer son titre et ses lignes ; gardez-le rapide car le déplacement du pointeur peut l’appeler fréquemment. tooltip.onLeave convient pour effacer l’état de l’application.

Utilisez explicitement titleFormat pour les grandes valeurs numériques X. La détection automatique considère les valeurs supérieures à environ un milliard comme de type temporel.

Superpositions

Les superpositions prennent en charge le texte, les rectangles, les cercles, les lignes et les images en coordonnées en ratio ou en pixels CSS par rapport à la zone du graphique ou au canevas complet. Les sources d’images sous forme de chaîne sont récupérées et décodées de façon asynchrone. Attendez setOverlay() et configurez le CORS pour les images distantes.

Les handles fournis par l'appelant ImageBitmap restent la propriété de l'appelant. Le worker et le thread principal les serialisent via structured-clone et ne ferment que les clones appartenant au renderer. Une background ou un overlay eager-only créé à la construction peut être fermé après que initialize() se soit résolu. Si un overlay de construction mélange un bitmap de l'appelant avec une URL ou une autre source résolue de façon asynchrone, conservez le handle ouvert jusqu'à ce que l'overlay soit remplacé ou détruit ; alternativement, appelez et attendez setOverlay() après l'initialisation avant de le fermer.

Les backgrounds runtime et les overlays eager-only peuvent être fermés après le retour de updateAppearance() (ou de son batch() englobant), même si l'initialisation est en attente. Pour un overlay runtime mixte ou différé, appelez setOverlay() directement et conservez les handles de l'appelant ouverts jusqu'à ce que sa promesse soit résolue. L'implémentation de fetch/décodage d'URL est fournie comme chunk à la demande distinct et ne fait pas partie du runtime initial du navigateur.

Si certaines sources échouent, setOverlay() installe les éléments réussis et rejette avec ChartOverlayError. Si chaque élément demandé échoue, l'overlay précédemment rendu reste installé. Les échecs de résolution et de livraison au renderer atteignent également setOverlayErrorCallback() et les hooks d'erreur de l'adaptateur de framework. Surpasser une mise à jour en attente ou détruire le chart constitue une annulation routinière : la promesse en attente se résout sans installation et aucune erreur d'overlay n'est signalée.

Accessibilité

Sixtyfold ajoute des mécanismes de secours uniquement lorsque l’hôte ne les a pas déjà fournis. Les graphiques interactifs reçoivent role="application", tabindex="0", et un nom accessible de secours. Les graphiques en lecture seule (interactive: false) reçoivent role="img" et ne sont pas ajoutés à l’ordre de tabulation. Les attributs existants role, tabindex, aria-label et aria-labelledby sont préservés.

Privilégiez un nom et une description spécifiques à l’application :

<canvas
  aria-label="Hourly load for feeder 12"
  aria-describedby="feeder-12-summary"
></canvas>
<p id="feeder-12-summary">Latest load is 73 kW; the daily peak was 96 kW.</p>

Pour un graphique interactif, fournissez un résumé textuel adjacent ou une alternative sous forme de tableau de données et référencez‑le avec aria-describedby. N’imposez pas role="img" à un graphique contrôlé au clavier. La couleur ne doit pas être le seul moyen par lequel l’application environnante identifie une série.

Le panoramique, le zoom, la réinitialisation et l’annulation de sélection au clavier sont annoncés via une région live cachée en mode polite. Localisez ces messages avec keyboardAnnouncements, mettez‑les à jour ultérieurement avec setKeyboardAnnouncements(), ou désactivez‑les lorsque l’application environnante fournit un retour équivalent. Le modèle de viewport optionnel peut ajouter le début, la fin et l’étendue visibles en pourcentage de l’ensemble de la plage de données. Les messages animés de panoramique, zoom et réinitialisation attendent que le renderer confirme la stabilisation du viewport, de sorte qu’une image d’animation intermédiaire n’est jamais annoncée.

Sixtyfold n’annonce pas chaque échantillon streamé ni chaque repaint via aria-live ; des annonces à haute fréquence rendraient le graphique inutilisable avec un lecteur d’écran. Lorsqu’une application rencontre des événements significatifs (par ex. une source déconnectée ou un franchissement de seuil), exposez-les via une région live gérée par l’application et régulée (throttled).