Catégories

← View All Tools

Graphique d'Anneau de Progrès

Créer de beaux indicateurs de progrès circulaires avec des animations, parfaits pour afficher des pourcentages, des taux d'achèvement et des métriques de progrès

Valeurs de progrès (0-100). Supporte le tableau JSON avec étiquettes, paires simples étiquette:valeur ou juste des valeurs

Titre qui sera affiché au-dessus du graphique

Taille de chaque anneau de progrès en pixels

Épaisseur du trait de l'anneau de progrès

Angle de départ en degrés (-90 = haut, 0 = droite, 90 = bas, 180 = gauche)

Couleurs personnalisées pour les anneaux de progrès (couleurs hex séparées par des virgules)

Durée de l'animation de progrès en millisecondes

Couleur de fond pour le conteneur du graphique

Afficher la valeur de pourcentage au centre de chaque anneau

Afficher l'étiquette sous chaque anneau de progrès

Animer les anneaux de progrès lorsqu'ils se chargent

Points clés

Catégorie
Data Visualization
Types d’entrée
textarea, text, number, select, color, checkbox
Type de sortie
html
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

Créez des indicateurs de progrès circulaires élégants et animés pour visualiser vos données, taux d'achèvement et pourcentages de manière intuitive et professionnelle.

Quand l’utiliser

  • •Pour visualiser le taux d'avancement d'un projet ou d'une tâche spécifique.
  • •Pour présenter des KPIs ou des métriques de performance dans un tableau de bord.
  • •Pour enrichir vos rapports avec des éléments visuels dynamiques et faciles à interpréter.

Comment ça marche

  • •Saisissez vos données sous forme de liste, de paires étiquette:valeur ou au format JSON.
  • •Personnalisez l'apparence en ajustant l'épaisseur, la taille et le schéma de couleurs des anneaux.
  • •Configurez les options d'affichage comme le pourcentage central ou les étiquettes textuelles.
  • •Générez votre graphique animé instantanément pour l'intégrer à vos supports.

Cas d’usage

Suivi des objectifs de vente mensuels par équipe.
Affichage du taux de complétion de profils utilisateurs sur une plateforme.
Visualisation de l'avancement des étapes d'un projet de développement.

Exemples

1. Suivi des objectifs trimestriels

Chef de projet
Contexte
Le chef de projet doit présenter l'état d'avancement de trois phases clés à la direction.
Problème
Les données brutes sont difficiles à lire rapidement lors d'une présentation.
Comment l’utiliser
Saisir les trois phases avec leurs pourcentages respectifs et choisir le schéma de couleurs 'Succès'.
Configuration d’exemple
[{"label": "Phase 1", "value": 100}, {"label": "Phase 2", "value": 75}, {"label": "Phase 3", "value": 30}]
Résultat
Trois anneaux de progrès s'affichent, montrant clairement les phases terminées, en cours et à démarrer.

2. Tableau de bord de performance

Analyste de données
Contexte
Un analyste souhaite intégrer des jauges circulaires dans un rapport web pour illustrer les taux de conversion.
Problème
Besoin d'un format visuel compact et moderne pour comparer plusieurs métriques.
Comment l’utiliser
Utiliser le format JSON pour définir les taux et appliquer une couleur personnalisée pour correspondre à la charte graphique.
Configuration d’exemple
colorScheme: 'gradient', showPercentage: true, animated: true
Résultat
Des anneaux animés avec un dégradé de couleurs affichent les taux de conversion avec précision.

Tester avec des échantillons

json
Exemples PDF
Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10
preferred input family json
json
Exemples de Communication Temps Réel WebRTC
Exemples complets WebRTC pour communication audio/vidéo P2P, canaux de données, partage d'écran et serveur de signalisation
preferred input family json
json
Exemples Avancés d'Application Grafana
Exemples complets de Grafana couvrant le design avancé de tableaux de bord, la configuration d'alertes, l'intégration de sources de données et le développement de plugins
preferred input family json
json
Exemples d'Analyse de Logs ELK Stack
Exemples complets ELK Stack pour agrégation, traitement et visualisation de logs dans les systèmes distribués
preferred input family json
json

Hubs associés

Outils Json pour Generate
Découvrez 33 outils json pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Json pour Convert
Découvrez 100 outils json pour des workflows de convert et comparez rapidement des utilitaires proches.
Outils Json
Découvrez 43 outils json pour des workflows de utility et comparez rapidement des utilitaires proches.
Outils Json pour Format
Découvrez 6 outils json pour des workflows de format et comparez rapidement des utilitaires proches.

FAQ

Quels formats de données sont acceptés ?

L'outil accepte des valeurs simples (0-100), des paires étiquette:valeur, ou un tableau JSON structuré.

Puis-je personnaliser les couleurs ?

Oui, vous pouvez choisir parmi des schémas prédéfinis ou définir vos propres couleurs via des codes hexadécimaux.

L'animation est-elle obligatoire ?

Non, vous pouvez désactiver l'option 'Animé' dans les paramètres si vous préférez une vue statique.

Quelle est la taille maximale d'un anneau ?

La taille de l'anneau peut être ajustée entre 100 et 400 pixels selon vos besoins d'affichage.

Puis-je afficher plusieurs anneaux en même temps ?

Oui, en saisissant plusieurs entrées dans le champ de données, l'outil générera automatiquement une série d'anneaux.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/progress-ring-chart

Paramètres de la requête

Nom du paramètre Type Requis Description
progressData textarea Oui Valeurs de progrès (0-100). Supporte le tableau JSON avec étiquettes, paires simples étiquette:valeur ou juste des valeurs
chartTitle text Non Titre qui sera affiché au-dessus du graphique
ringSize number Non Taille de chaque anneau de progrès en pixels
ringThickness number Non Épaisseur du trait de l'anneau de progrès
startAngle number Non Angle de départ en degrés (-90 = haut, 0 = droite, 90 = bas, 180 = gauche)
colorScheme select Non -
customColors text Non Couleurs personnalisées pour les anneaux de progrès (couleurs hex séparées par des virgules)
animationDuration number Non Durée de l'animation de progrès en millisecondes
backgroundColor color Non Couleur de fond pour le conteneur du graphique
showPercentage checkbox Non Afficher la valeur de pourcentage au centre de chaque anneau
showLabel checkbox Non Afficher l'étiquette sous chaque anneau de progrès
animated checkbox Non Animer les anneaux de progrès lorsqu'ils se chargent

Format de réponse

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "Créer de beaux indicateurs de progrès circulaires avec des animations, parfaits pour afficher des pourcentages, des taux d'achèvement et des métriques de progrès",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]