Diagramm-Element

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
chartType	string	true	-	-	Der Typ des anzuzeigenden Diagramms. Unterstützte Typen: bar, line, area, scatter, pie, doughnut, radar.
chartWidth	number	true	-	200 - 800	Die Breite der Diagrammfläche in Pixel.
chartHeight	number	true	-	150 - 600	Die Höhe der Diagrammfläche in Pixel.
bgColor	string	false	-	-	Die Hintergrundfarbe des Diagramms im Hex-Format.
bgAlpha	number	false	-	0 - 1	Der Transparenzgrad des Diagrammhintergrunds. 1 steht für volle Opazität und 0 für volle Transparenz.
showAxis	boolean	false	-	-	Ob die Diagramachsen angezeigt werden sollen.
axisColor	string	false	-	-	Die Farbe der Diagramachsen im Hex-Format.
axisWidth	number	false	-	1 - 10	Die Breite der Diagramachsen in Pixel.
showGrid	boolean	false	-	-	Ob das Diagrammnetz angezeigt werden soll.
gridColor	string	false	-	-	Die Farbe des Diagrammnetzes im Hex-Format.
gridAlpha	number	false	-	0 - 1	Der Transparenzgrad des Diagrammnetzes. 1 steht für volle Opazität und 0 für volle Transparenz.
showLabels	boolean	false	-	-	Ob die Diagrammlabels angezeigt werden sollen.
labelStyle	object	false	-	-	Textstilkonfiguration für Diagrammlabels.
labelStyle.fill	string	false	-	-	Die Schriftfarbe der Diagrammlabels im Hex-Format.
labelStyle.fontSize	number	false	-	8 - 100	Die Schriftgröße der Diagrammlabels in Pixel.
labelStyle.fontFamily	string	false	-	-	Die Schriftart der Diagrammlabels.
labelStyle.fontWeight	string	false	-	-	Die Schriftstärke der Diagrammlabels (z. B. normal, fett).
labelStyle.stroke	string	false	-	-	Die Strichfarbe der Diagrammlabels im Hex-Format.
labelStyle.strokeThickness	number	false	-	0 - 10	Die Strichbreite der Diagrammlabels in Pixel.
labelStyle.dropShadow	boolean	false	-	-	Ob der Schatteneffekt für Diagrammlabels aktiviert werden soll.
labelStyle.dropShadowColor	string	false	-	-	Die Schattenfarbe der Diagrammlabels im Hex-Format.
labelStyle.dropShadowBlur	number	false	-	0 - 20	Der Unschärferadius des Label-Schattens.
labelStyle.dropShadowDistance	number	false	-	0 - 20	Der Abstand des Label-Schattens vom Text.
labelStyle.dropShadowAngle	number	false	-	0 - 6.28	Der Winkel des Label-Schattens in Bogenmaß.
labelStyle.dropShadowAlpha	number	false	-	0 - 1	Die Opazität des Label-Schattens.
linePointStyle	string	false	-	-	Der Stil der Datenpunkte in Linien-/Flächendiagrammen. Optionen: filled, hollow.
lineSmooth	boolean	false	-	-	Ob die Linien in Linien-/Flächendiagrammen geglättet werden sollen.
lineAreaAlpha	number	false	-	0 - 1	Der Transparenzgrad der ausgefüllten Fläche in Flächendiagrammen.
showLegend	boolean	false	-	-	Ob die Diagrammlegende angezeigt werden soll.
legendPosition	string	false	-	-	Die Position der Legende. Unterstützt derzeit: bottom.
legendItemSize	number	false	-	10 - 30	Die Größe der Legendenobjekte in Pixel.
legendGap	number	false	-	4 - 20	Der Abstand zwischen den Legendenobjekten in Pixel.
showBarBackground	boolean	false	-	-	Ob der Hintergrund von Balkendiagrammen angezeigt werden soll.
barBackgroundColor	string	false	-	-	Die Hintergrundfarbe der Balken im Hex-Format.
barBackgroundAlpha	number	false	-	0 - 1	Der Transparenzgrad des Balkenhintergrunds.
barOrientation	string	false	-	-	Die Ausrichtung der Balken. Optionen: vertikal, horizontal.
barCornerRadius	number	false	-	0 - 20	Der Eckenradius der Balken in Pixel.
dataSet	array	false	-	-	Ein Array von Datensätzen, die zum Rendern des Diagramms verwendet werden. Jeder Datensatz enthält einen Zeitpunkt (dataTime) und Datenpunkte (dataPoints).

Diagrammtypen

Die Eigenschaft chartType bestimmt den Visualisierungsstil:

bar: Vertikales oder horizontales Balkendiagramm
line: Liniendiagramm mit optionaler Glättung
area: Flächendiagramm mit ausgefüllten Regionen
scatter: Streudiagramm mit Datenpunkten
pie: Tortendiagramm, das Proportionen zeigt
doughnut: Donut-Diagramm (Tortendiagramm mit Loch in der Mitte)
radar: Radar-/Spinnendiagramm

Datenstruktur

Das dataSet ist ein Array von Datenobjekten, wobei jedes Objekt enthält:

dataTime: Der Zeitpunkt relativ zum ChartNode (in Sekunden)
dataPoints: Ein Array von Datenpunkten, die zu diesem Zeitpunkt angezeigt werden

Jeder Datenpunkt in dataPoints enthält:

id: Eindeutiger Identifikator für den Datenpunkt
label: Das Label/der Name des Datenpunkts
value: Der numerische Wert
color (optional): Benutzerdefinierte Farbe für diesen Datenpunkt im Hex-Format

Label-Styling

Das labelStyle-Objekt steuert das Erscheinungsbild der Diagrammlabels:

Schriftarten Eigenschaften: fill, fontSize, fontFamily, fontWeight
Strecken Eigenschaften: stroke, strokeThickness
Schatten Eigenschaften: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

Funktionen von Linien- und Flächendiagrammen

Für Linien- und Flächendiagramme können Sie konfigurieren:

linePointStyle: Datenpunkte als gefüllte oder hohle Kreise anzeigen
lineSmooth: Glatte Kurven anstelle von geraden Linien aktivieren
lineAreaAlpha: Die Opazität der ausgefüllten Fläche steuern (nur Flächendiagramme)

Funktionen von Balkendiagrammen

Für Balkendiagramme können Sie konfigurieren:

barOrientation: Balken vertikal oder horizontal anzeigen
barCornerRadius: Die Ecken der Balken abrunden
showBarBackground: Einen Hintergrund hinter den Balken anzeigen
barBackgroundColor/barBackgroundAlpha: Den Hintergrund der Balken gestalten

Legendenkonfiguration

Aktivieren und passen Sie die Diagrammlegende an:

showLegend: Sichtbarkeit der Legende umschalten
legendPosition: Position der Legende (unterstützt derzeit "bottom")
legendItemSize: Größe der Farbindikatoren in der Legende
legendGap: Abstand zwischen den Legendenobjekten

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