114 lines
3.2 KiB
Markdown
114 lines
3.2 KiB
Markdown
# Chart-Integration mit ApexCharts
|
|
|
|
Dieses Dokument beschreibt die Integration von ApexCharts in die MYP-Plattform zur Visualisierung von Daten.
|
|
|
|
## Übersicht
|
|
|
|
Die MYP-Plattform nutzt [ApexCharts](https://apexcharts.com/) für die Darstellung von Diagrammen und Visualisierungen. ApexCharts ist eine moderne JavaScript-Bibliothek zur Erstellung interaktiver Diagramme mit einem einfachen API und reaktionsfähigem Design.
|
|
|
|
## Dateien und Struktur
|
|
|
|
Die Chart-Integration besteht aus folgenden Komponenten:
|
|
|
|
1. **ApexCharts-Bibliothek**: `static/js/charts/apexcharts.min.js`
|
|
2. **Konfigurationsdatei**: `static/js/charts/chart-config.js`
|
|
3. **Renderer**: `static/js/charts/chart-renderer.js`
|
|
4. **Adapter**: `static/js/charts/chart-adapter.js`
|
|
|
|
### Funktionsweise
|
|
|
|
1. Die **Chart-Konfiguration** definiert Standardstile, Farben und Optionen für alle Diagrammtypen.
|
|
2. Der **Chart-Renderer** verwaltet die Erstellung, Aktualisierung und Zerstörung von Diagrammen.
|
|
3. Der **Chart-Adapter** verbindet die bestehende `renderChart`-Funktion mit der neuen ApexCharts-Implementierung.
|
|
|
|
## Verwendung in Templates
|
|
|
|
Um ein Diagramm in einer Template-Datei anzuzeigen:
|
|
|
|
```html
|
|
<div id="mein-chart" class="h-64" data-api-endpoint="/api/pfad/zu/daten" data-chart data-chart-type="line"></div>
|
|
```
|
|
|
|
### Verfügbare Attribute:
|
|
|
|
- `data-chart`: Markiert das Element als Diagramm-Container
|
|
- `data-api-endpoint`: Der API-Endpunkt, von dem Daten geladen werden
|
|
- `data-chart-type`: Der Diagrammtyp (optional, wird sonst automatisch bestimmt)
|
|
|
|
## Unterstützte Diagrammtypen
|
|
|
|
Die folgenden Diagrammtypen werden unterstützt:
|
|
|
|
- `line`: Liniendiagramm
|
|
- `area`: Flächendiagramm
|
|
- `bar`: Balkendiagramm
|
|
- `pie`: Kreisdiagramm
|
|
- `donut`: Ringdiagramm
|
|
- `radial`: Radialdiagramm
|
|
|
|
## Datenformat
|
|
|
|
Die API-Endpunkte sollten Daten in einem der folgenden Formate zurückgeben:
|
|
|
|
### Für Kreisdiagramme (pie/donut):
|
|
|
|
```json
|
|
{
|
|
"scheduled": 12,
|
|
"active": 5,
|
|
"completed": 25,
|
|
"cancelled": 3
|
|
}
|
|
```
|
|
|
|
### Für Balkendiagramme:
|
|
|
|
```json
|
|
[
|
|
{
|
|
"printer_name": "Drucker 1",
|
|
"job_count": 25,
|
|
"print_hours": 124.5
|
|
},
|
|
{
|
|
"printer_name": "Drucker 2",
|
|
"job_count": 18,
|
|
"print_hours": 85.2
|
|
}
|
|
]
|
|
```
|
|
|
|
### Für Linien- und Flächendiagramme:
|
|
|
|
```json
|
|
[
|
|
{
|
|
"date": "2023-01-01",
|
|
"value": 42
|
|
},
|
|
{
|
|
"date": "2023-01-02",
|
|
"value": 58
|
|
}
|
|
]
|
|
```
|
|
|
|
## Theme-Unterstützung
|
|
|
|
Die Diagramme unterstützen automatisch das Light- und Dark-Mode-Theme der MYP-Plattform. Bei einem Themenwechsel werden alle aktiven Diagramme mit den passenden Farben aktualisiert.
|
|
|
|
## Anpassung
|
|
|
|
Um die Diagramme anzupassen:
|
|
|
|
1. **Farben**: Anpassungen in `MYP_CHART_COLORS` in `chart-config.js`
|
|
2. **Standardoptionen**: Änderungen in `getBaseChartOptions()` in `chart-config.js`
|
|
3. **Spezifische Diagrammtypen**: Anpassungen in den jeweiligen Funktionen (`getLineChartConfig`, `getPieChartConfig`, etc.)
|
|
|
|
## Erweiterung
|
|
|
|
Um weitere Diagrammtypen oder Funktionen hinzuzufügen:
|
|
|
|
1. Fügen Sie eine neue Konfigurationsfunktion in `chart-config.js` hinzu
|
|
2. Erweitern Sie die `createChart`-Funktion in `chart-renderer.js`, um den neuen Diagrammtyp zu unterstützen
|
|
3. Aktualisieren Sie den `chart-adapter.js`, um die Datentransformation für den neuen Diagrammtyp zu unterstützen |