Elemento del Grafico

Tipi di Grafico

La proprietà chartType determina lo stile di visualizzazione:

• bar: Grafico a barre verticale o orizzontale
• line: Grafico a linee con levigatura opzionale
• area: Grafico ad area con regioni riempite
• scatter: Grafico a dispersione con punti dati
• pie: Grafico a torta che mostra proporzioni
• doughnut: Grafico a ciambella (grafico a torta con foro centrale)
• radar: Grafico radar/spider

Struttura dei Dati

Il dataSet è un array di oggetti dati, dove ogni oggetto contiene:

• dataTime: Il punto temporale relativo al ChartNode (in secondi)
• dataPoints: Un array di punti dati da visualizzare in questo momento

Ogni punto dati in dataPoints contiene:

• id: Identificatore univoco per il punto dati
• label: L'etichetta/nome del punto dati
• value: Il valore numerico
• color (opzionale): Colore personalizzato per questo punto dati in formato esadecimale

Stile delle Etichette

L'oggetto labelStyle controlla l'aspetto delle etichette del grafico:

• Proprietà del Font: fill, fontSize, fontFamily, fontWeight
• Proprietà del Contorno: stroke, strokeThickness
• Proprietà dell'Ombra: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Caratteristiche dei Grafici a Linea e ad Area

Per i grafici a linea e ad area, puoi configurare:

• linePointStyle: Visualizzare i punti dati come cerchi riempiti o cerchi vuoti
• lineSmooth: Abilitare curve morbide invece di linee dritte
• lineAreaAlpha: Controllare l'opacità dell'area riempita (solo grafici ad area)

Caratteristiche dei Grafici a Barre

Per i grafici a barre, puoi configurare:

• barOrientation: Visualizzare le barre verticalmente o orizzontalmente
• barCornerRadius: Arrotondare gli angoli delle barre
• showBarBackground: Visualizzare uno sfondo dietro le barre
• barBackgroundColor/barBackgroundAlpha: Stilizzare lo sfondo delle barre

Configurazione della Legenda

Abilita e personalizza la legenda del grafico:

• showLegend: Attivare/disattivare la visibilità della legenda
• legendPosition: Posizione della legenda (attualmente supporta "bottom")
• legendItemSize: Dimensione degli indicatori di colore della legenda
• legendGap: Spaziatura tra gli elementi della legenda

{
"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" }
    ]
  }
]
}