Data Visualization
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
Appelez cet outil depuis votre code en trois langages.
curl -X POST 'https://api.elysiatools.com/fr/api/tools/progress-ring-chart' \
-H 'Content-Type: application/json' \
-d '{"progressData":"JSON format:\n[{"label": "Project A", "value": 75},\n{"label": "Project B", "value": 90},\n{"label": "Project C", "value": 45}]\n\nor text format:\nProject A:75\nProject B:90\nProject C:45\n\nor single values:\n75\n90\n45","chartTitle":"Entrez le titre du graphique...","ringSize":"200","ringThickness":"15","startAngle":"-90","colorScheme":"default","customColors":"#3b82f6,#10b981,#f59e0b","animationDuration":"1000","backgroundColor":"#ffffff","showPercentage":true,"showLabel":true,"animated":true}'Envoyez une requête POST avec vos entrées en JSON. Les paramètres de type fichier nécessitent un upload préalable.
POST https://api.elysiatools.com/fr/api/tools/progress-ring-chart| Nom | 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 |
Résultat HTML
{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}Ajoutez cet outil à votre serveur Model Context Protocol pour que les agents IA puissent le lister et l'appeler.
Ajoutez ce bloc à la configuration de votre client 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://api.elysiatools.com/mcp/sse?toolId=progress-ring-chart",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}Après connexion au point d'accès SSE, listez les outils exposés :
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Appelez l'outil par son id ; les arguments sont construits à partir de ses paramètres :
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "progress-ring-chart",
"arguments": {
"progressData": "JSON format:\n[{"label": "Project A", "value": 75},\n{"label": "Project B", "value": 90},\n{"label": "Project C", "value": 45}]\n\nor text format:\nProject A:75\nProject B:90\nProject C:45\n\nor single values:\n75\n90\n45",
"chartTitle": "Entrez le titre du graphique...",
"ringSize": "200",
"ringThickness": "15",
"startAngle": "-90",
"colorScheme": "default",
"customColors": "#3b82f6,#10b981,#f59e0b",
"animationDuration": "1000",
"backgroundColor": "#ffffff",
"showPercentage": true,
"showLabel": true,
"animated": true
}
}
}Des questions ou un problème ? Contactez [email protected]