Data Visualization
Créer des graphiques en marches d'escalier avec visualisation de données style escalier, parfait pour montrer les changements discrets dans le temps
Appelez cet outil depuis votre code en trois langages.
curl -X POST 'https://api.elysiatools.com/fr/api/tools/step-chart-generator' \
-H 'Content-Type: application/json' \
-d '{"chartTitle":"Entrez le titre du graphique...","dataPoints":"JSON format example:\n[{"x": "Jan", "y": 100, "label": "January"},\n{"x": "Feb", "y": 150, "label": "February"},\n{"x": "Mar", "y": 120, "label": "March"},\n{"x": "Apr", "y": 180, "label": "April"}]","xAxisLabel":"X Axis","yAxisLabel":"Y Axis","stepStyle":"step-before","lineColor":"#3b82f6","lineWidth":"2","pointColor":"#3b82f6","pointSize":"4","showDataPoints":true,"showLabels":false,"showGrid":true,"fillArea":false,"areaColor":"#3b82f6","gridColor":"#e0e0e0","backgroundColor":"#ffffff","chartWidth":"800","chartHeight":"500","dataLabelFormat":"number","fontSize":"12","titleSize":"18","fontFamily":"Arial","animationEnabled":true,"animationDuration":"1000"}'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/step-chart-generator| Nom | Type | Requis | Description |
|---|---|---|---|
| chartTitle | text | Non | Titre qui sera affiché au-dessus du graphique en marches |
| dataPoints | textarea | Oui | Points de données comme tableau JSON avec propriétés x, y et libellé optionnel |
| xAxisLabel | text | Non | Étiquette pour l'axe X |
| yAxisLabel | text | Non | Étiquette pour l'axe Y |
| stepStyle | select | Oui | — |
| lineColor | color | Non | Couleur de la ligne en marches |
| lineWidth | number | Non | Largeur de la ligne en marches en pixels |
| pointColor | color | Non | Couleur des points de données |
| pointSize | number | Non | Taille des points de données en pixels |
| showDataPoints | checkbox | Non | Afficher les points de données sur la ligne en marches |
| showLabels | checkbox | Non | Afficher les étiquettes de valeur sur les points de données |
| showGrid | checkbox | Non | Afficher les lignes de grille de fond |
| fillArea | checkbox | Non | Remplir la zone sous la ligne en marches avec de la couleur |
| areaColor | color | Non | Couleur pour le remplissage de zone (si activé) |
| gridColor | color | Non | Couleur des lignes de grille |
| backgroundColor | color | Non | Couleur de fond du graphique |
| chartWidth | number | Non | Largeur du graphique en pixels |
| chartHeight | number | Non | Hauteur du graphique en pixels |
| dataLabelFormat | select | Non | — |
| fontSize | number | Non | Taille de police pour les étiquettes et le texte |
| titleSize | number | Non | Taille de police pour le titre du graphique |
| fontFamily | text | Non | Famille de police pour les éléments de texte |
| animationEnabled | checkbox | Non | Animer le graphique au chargement |
| animationDuration | number | Non | Durée de l'animation en millisecondes |
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-step-chart-generator": {
"name": "step-chart-generator",
"description": "Créer des graphiques en marches d'escalier avec visualisation de données style escalier, parfait pour montrer les changements discrets dans le temps",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=step-chart-generator",
"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": "step-chart-generator",
"arguments": {
"chartTitle": "Entrez le titre du graphique...",
"dataPoints": "JSON format example:\n[{"x": "Jan", "y": 100, "label": "January"},\n{"x": "Feb", "y": 150, "label": "February"},\n{"x": "Mar", "y": 120, "label": "March"},\n{"x": "Apr", "y": 180, "label": "April"}]",
"xAxisLabel": "X Axis",
"yAxisLabel": "Y Axis",
"stepStyle": "step-before",
"lineColor": "#3b82f6",
"lineWidth": "2",
"pointColor": "#3b82f6",
"pointSize": "4",
"showDataPoints": true,
"showLabels": false,
"showGrid": true,
"fillArea": false,
"areaColor": "#3b82f6",
"gridColor": "#e0e0e0",
"backgroundColor": "#ffffff",
"chartWidth": "800",
"chartHeight": "500",
"dataLabelFormat": "number",
"fontSize": "12",
"titleSize": "18",
"fontFamily": "Arial",
"animationEnabled": true,
"animationDuration": "1000"
}
}
}Des questions ou un problème ? Contactez [email protected]