Chart Element

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
chartType	string	true	-	-	Het type diagram dat weergegeven moet worden. Ondersteunde types: bar, line, area, scatter, pie, doughnut, radar.
chartWidth	number	true	-	200 - 800	De breedte van het diagramcanvas, in pixels.
chartHeight	number	true	-	150 - 600	De hoogte van het diagramcanvas, in pixels.
bgColor	string	false	-	-	De achtergrondkleur van het diagram, in hex-formaat.
bgAlpha	number	false	-	0 - 1	Het transparantieniveau van de achtergrond van het diagram. 1 staat voor volledige opaciteit en 0 voor volledige transparantie.
showAxis	boolean	false	-	-	Of de assen van het diagram weergegeven moeten worden.
axisColor	string	false	-	-	De kleur van de assen van het diagram, in hex-formaat.
axisWidth	number	false	-	1 - 10	De breedte van de assen van het diagram, in pixels.
showGrid	boolean	false	-	-	Of het raster van het diagram weergegeven moet worden.
gridColor	string	false	-	-	De kleur van het raster van het diagram, in hex-formaat.
gridAlpha	number	false	-	0 - 1	Het transparantieniveau van het raster van het diagram. 1 staat voor volledige opaciteit en 0 voor volledige transparantie.
showLabels	boolean	false	-	-	Of de labels van het diagram weergegeven moeten worden.
labelStyle	object	false	-	-	Tekststijlconfiguratie voor de labels van het diagram.
labelStyle.fill	string	false	-	-	De letterkleur van de labels van het diagram, in hex-formaat.
labelStyle.fontSize	number	false	-	8 - 100	De lettergrootte van de labels van het diagram, in pixels.
labelStyle.fontFamily	string	false	-	-	De lettertypefamilie van de labels van het diagram.
labelStyle.fontWeight	string	false	-	-	Het lettertypegewicht van de labels van het diagram (bijv. normaal, vet).
labelStyle.stroke	string	false	-	-	De stroke-kleur van de labels van het diagram, in hex-formaat.
labelStyle.strokeThickness	number	false	-	0 - 10	De stroke-breedte van de labels van het diagram, in pixels.
labelStyle.dropShadow	boolean	false	-	-	Of een schaduweffect voor de labels van het diagram ingeschakeld moet worden.
labelStyle.dropShadowColor	string	false	-	-	De schaduwkleur van de labels van het diagram, in hex-formaat.
labelStyle.dropShadowBlur	number	false	-	0 - 20	De vervagingstraal van de schaduw van het label.
labelStyle.dropShadowDistance	number	false	-	0 - 20	De afstand van de schaduw van het label tot de tekst.
labelStyle.dropShadowAngle	number	false	-	0 - 6.28	De hoek van de schaduw van het label, in radialen.
labelStyle.dropShadowAlpha	number	false	-	0 - 1	De opaciteit van de schaduw van het label.
linePointStyle	string	false	-	-	De stijl van datapunten in lijn/oppervlakte diagrammen. Opties: gevuld, hol.
lineSmooth	boolean	false	-	-	Of de lijnen in lijn/oppervlakte diagrammen glad gemaakt moeten worden.
lineAreaAlpha	number	false	-	0 - 1	Het transparantieniveau van het gevulde gebied in oppervlakte diagrammen.
showLegend	boolean	false	-	-	Of de legenda van het diagram weergegeven moet worden.
legendPosition	string	false	-	-	De positie van de legenda. Ondersteunt momenteel: onder.
legendItemSize	number	false	-	10 - 30	De grootte van de legenda-items, in pixels.
legendGap	number	false	-	4 - 20	De spatiëring tussen legenda-items, in pixels.
showBarBackground	boolean	false	-	-	Of de achtergrond van staafdiagrammen weergegeven moet worden.
barBackgroundColor	string	false	-	-	De achtergrondkleur van de staven, in hex-formaat.
barBackgroundAlpha	number	false	-	0 - 1	Het transparantieniveau van de achtergrond van de staven.
barOrientation	string	false	-	-	De oriëntatie van de staven. Opties: verticaal, horizontaal.
barCornerRadius	number	false	-	0 - 20	De hoekradius van de staven, in pixels.
dataSet	array	false	-	-	Een array van datasets die gebruikt worden om het diagram te renderen. Elke dataset bevat een tijdstip (dataTime) en datapunten (dataPoints).

Chart Types

De chartType eigenschap bepaalt de visualisatie stijl:

bar: Verticale of horizontale staafdiagram
line: Lijndiagram met optionele smoothing
area: Oppervlakte diagram met gevulde gebieden
scatter: Spreidingsdiagram met datapunten
pie: Taartdiagram dat verhoudingen toont
doughnut: Ringdiagram (taartdiagram met een gat in het midden)
radar: Radar/spider diagram

Data Structure

De dataSet is een array van data-objecten, waarbij elk object bevat:

dataTime: Het tijdstip ten opzichte van de ChartNode (in seconden)
dataPoints: Een array van datapunten die op dit moment weergegeven moeten worden

Elk datapunt in dataPoints bevat:

id: Unieke identificatie voor het datapunt
label: Het label/de naam van het datapunt
value: De numerieke waarde
color (optioneel): Aangepaste kleur voor dit datapunt in hex-formaat

Label Styling

Het labelStyle object controleert het uiterlijk van de diagramlabels:

Lettertype-eigenschappen: fill, fontSize, fontFamily, fontWeight
Stroke-eigenschappen: stroke, strokeThickness
Schaduw-eigenschappen: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Line and Area Chart Features

Voor lijn- en oppervlakte diagrammen kun je configureren:

linePointStyle: Toon datapunten als gevulde cirkels of holle cirkels
lineSmooth: Schakel zachte krommen in plaats van rechte lijnen in
lineAreaAlpha: Beheer de opaciteit van het gevulde gebied (oppervlakte diagrammen alleen)

Bar Chart Features

Voor staafdiagrammen kun je configureren:

barOrientation: Toon staven verticaal of horizontaal
barCornerRadius: Ronde de hoeken van staven
showBarBackground: Toon een achtergrond achter de staven
barBackgroundColor/barBackgroundAlpha: Style de achtergrond van de staven

Legend Configuration

Schakel de diagramlegenda in en pas deze aan:

showLegend: Schakel de zichtbaarheid van de legenda in of uit
legendPosition: Positie van de legenda (ondersteunt momenteel "onder")
legendItemSize: Grootte van de kleurindicatoren in de legenda
legendGap: Spatiëring tussen legenda-items

chartElement.json

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

Overview

Element

Effect