Chart Hilfsfunktionen

Die chart Komponente zeigt Datenvisualisierungen mithilfe von Apache ECharts an. Die Diagramme werden über Python konfiguriert, ohne dass JavaScript geschrieben werden muss.

WCAG AA

Chart.js

Funktionen

Diagrammtypen: Liniendiagramme und gestapelte Balkendiagramme.
Mehrere Datensätze: Mehrere Datenreihen mit Legende anzeigen.
Konfigurierbare Höhe: Höhe des Diagramms in rem.
Muster: Optionale Muster zur Barrierefreiheit für Menschen mit Farbenblindheit.

RTL

Verwendung

Die Komponente wird über das chart Tag eingebunden.

{% load insight_tags %} {% bar_chart config=chart_config %}  {% line_chart tag_id="line_chart_example" dataset=chart_data %}

Parameter

config (ChartConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für das Diagrammelement.	None	True
dataset		Diagrammdaten und Konfiguration.	ChartDatasetConfig(title='', x_axis_legend=[], series=[], data=[])	False
chart_height	int	Höhe des Diagramms in 'rem'.	24	False
aria_label	str	Barrierefreies Label, das den Zweck des Diagramms beschreibt.	""	False
show_decal	bool	Muster für farbenblinde Nutzer anzeigen.	True	False

ChartConfig( tag_id="sales-chart", dataset=ChartDatasetConfig( title="Monthly Sales", x_axis_legend=["Jan", "Feb", "Mar"], series=["Product A", "Product B"], data=[[100, 150, 200], [80, 120, 160]], ), chart_height=24, aria_label="Bar chart showing monthly sales for Product A and B", )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status		N/A

WCAG AA (Grundlagen)

Der Diagramm-Container hat die Eigenschaft role='img' mit einem beschreibenden aria-label.
Die aria-Option von ECharts ist aktiviert, um automatisch ARIA-Bezeichnungen und -Beschreibungen zu generieren.
Eine Alternative für Screenreader stellt die Daten als ausgeblendete Tabelle (sr-only) bereit.
Um farbenblinden Nutzern die Nutzung zu erleichtern, sind Muster standardmäßig aktiviert (show_decal=True).
Der Titel des Diagramms wird über die ECharts-Konfiguration festgelegt und als Teil des Diagramms dargestellt.
ECharts bietet integrierte Tooltip-Unterstützung für die Datenauswertung.
Hinweis: ECharts bietet nur eingeschränkte Tastaturzugänglichkeit. Siehe GitHub-Issue Nr. 18585.