www-from-model/content/samples/charts/index.de.md

title	date	description	summary	tags
Charts	2019-03-06	Leitfaden zur Verwendung von Chart.js mit Congo	Congo enthält Chart.js für leistungsstarke Charts und Datenvisualisierungen.	Chart Beispiele Graph Shortcodes

Congo bietet Unterstützung für Chart.js unter Verwendung des Shortcodes chart. Füge einfach das Chart-Markup in den Shortcode ein. Congo gestaltet die Charts automatisch so, dass sie der Konfiguration des Parameters colorScheme entsprechen. Die Farben können jedoch mit der normalen Chart.js-Syntax angepasst werden.

Weitere Details findest du in der [Chart-Shortcode-Dokumentation]({{< ref path="docs/shortcodes#chart" lang="en" >}}).

Die folgenden Beispiele sind eine kleine Auswahl aus der offiziellen Chart.js-Dokumentation. Du kannst auch die Quelle der Seite auf GitHub aufrufen, um das Markup zu sehen.

Säulendiagramm

{{< chart >}} type: 'bar', data: { labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli'], datasets: [{ label: 'Mein erster Datensatz', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] } {{< /chart >}}

Linien-Diagramm

{{< chart >}} type: 'line', data: { labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli'], datasets: [{ label: 'Mein erster Datensatz', data: [65, 59, 80, 81, 56, 55, 40], tension: 0.2 }] } {{< /chart >}}

Doughnut-Chart

{{< chart >}} type: 'doughnut', data: { labels: ['Rot', 'Blau', 'Gelb'], datasets: [{ label: 'Mein erster Datensatz', data: [300, 50, 100], backgroundColor: [ 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 205, 86, 0.7)' ], borderWidth: 0, hoverOffset: 4 }] } {{< /chart >}}