Élément de graphique

Types de graphiques

La propriété chartType détermine le style de visualisation :

• bar : Graphique à barres verticales ou horizontales
• line : Graphique linéaire avec lissage optionnel
• area : Graphique de zone avec régions remplies
• scatter : Nuage de points avec des points de données
• pie : Graphique en secteurs montrant des proportions
• doughnut : Graphique en anneau (graphique en secteurs avec un trou au centre)
• radar : Graphique radar/araignée

Structure des données

Le dataSet est un tableau d'objets de données, où chaque objet contient :

• dataTime : Le point temporel relatif au ChartNode (en secondes)
• dataPoints : Un tableau de points de données à afficher à ce moment

Chaque point de données dans dataPoints contient :

• id : Identifiant unique pour le point de données
• label : L'étiquette/le nom du point de données
• value : La valeur numérique
• color (optionnel) : Couleur personnalisée pour ce point de données au format hexadécimal

Style des étiquettes

L'objet labelStyle contrôle l'apparence des étiquettes de graphique :

• Propriétés de police : fill, fontSize, fontFamily, fontWeight
• Propriétés de contour : stroke, strokeThickness
• Propriétés d'ombre : dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Caractéristiques des graphiques linéaires et de zone

Pour les graphiques linéaires et de zone, vous pouvez configurer :

• linePointStyle : Afficher les points de données comme des cercles remplis ou des cercles vides
• lineSmooth : Activer des courbes lisses au lieu de lignes droites
• lineAreaAlpha : Contrôler l'opacité de la zone remplie (uniquement pour les graphiques de zone)

Caractéristiques des graphiques à barres

Pour les graphiques à barres, vous pouvez configurer :

• barOrientation : Afficher les barres verticalement ou horizontalement
• barCornerRadius : Arrondir les coins des barres
• showBarBackground : Afficher un arrière-plan derrière les barres
• barBackgroundColor/barBackgroundAlpha : Styliser l'arrière-plan des barres

Configuration de la légende

Activer et personnaliser la légende du graphique :

• showLegend : Basculer la visibilité de la légende
• legendPosition : Position de la légende (actuellement prend en charge "bottom")
• legendItemSize : Taille des indicateurs de couleur de la légende
• legendGap : Espacement entre les éléments de la légende

{
"id": "chart-element-id",
"type": "Chart",
"start": 0,
"duration": 10,
"trackIndex": 0,
"x": 100,
"y": 100,
"chartType": "bar",
"chartWidth": 800,
"chartHeight": 600,
"bgColor": "#ffffff",
"bgAlpha": 1,
"showAxis": true,
"axisColor": "#000000",
"axisWidth": 2,
"showGrid": true,
"gridColor": "#cccccc",
"gridAlpha": 0.5,
"showLabels": true,
"labelStyle": {
  "fill": "#333333",
  "fontSize": 12,
  "fontFamily": "Arial",
  "fontWeight": "normal",
  "stroke": "#000000",
  "strokeThickness": 0,
  "dropShadow": false,
  "dropShadowColor": "#000000",
  "dropShadowBlur": 4,
  "dropShadowDistance": 3,
  "dropShadowAngle": 1.2,
  "dropShadowAlpha": 1
},
"showLegend": true,
"legendPosition": "bottom",
"legendItemSize": 14,
"legendGap": 8,
"barOrientation": "vertical",
"barCornerRadius": 4,
"showBarBackground": false,
"barBackgroundColor": "#eeeeee",
"barBackgroundAlpha": 0.4,
"dataSet": [
  {
    "dataTime": 0,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 10, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 20, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 15, "color": "#ffce56" }
    ]
  },
  {
    "dataTime": 5,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 25, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 18, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 22, "color": "#ffce56" }
    ]
  }
]
}