Decker Anleitung

Folienerstellung - Statistiken einbetten

Sebastian Lukas Hauer

Lehrstuhl für Computergraphik, TU Dortmund

🚀 by Decker

Statistiken mit Chart.js

Ein Codeblock, der eine Klasse mit dem Namen -chart besitzt wird als Quelle für Daten eines Diagramms für Chart.js interpretiert.

Die möglichen Klassennamen sind:

.bar-chart

.horizontalBar-chart

.line-chart

.radar-chart

.doughnut-chart

.pie-chart

.polarArea-chart

Im Folgenden sehen Sie für alle Diagrammtypen Beispiele mit dem entsprechenden Quellcode.

Liniendiagramm

``` {.line-chart width="512px" }
January, February, March, April, May, June, July, August, September, October, November, December
James Smith,-52.0,59.0,-61.0,-80.0,56.0,-75.0,-40.0,45.0,-49.0,58.0,-68.0,70.0
Derek Jones, 98.0,-38.0,82.0,-54.0,-34.0,27.0,90.0,-36.0,60.0,-45.0,40.0,35.0
```

January, February, March, April, May, June, July, August, September, October, November, December
James Smith,-52.0,59.0,-61.0,-80.0,56.0,-75.0,-40.0,45.0,-49.0,58.0,-68.0,70.0
Derek Jones, 98.0,-38.0,82.0,-54.0,-34.0,27.0,90.0,-36.0,60.0,-45.0,40.0,35.0

Balkendiagramm

``` {.bar-chart width="512px" }
January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0
```

January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0

Horizontales Balkendiagramm

``` {.horizontalBar-chart width="512px" }
January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0
```

January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0

Radardiagramm

``` {.radar-chart width="384px" }
January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0
```

January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0

Ringdiagramm

``` {.doughnut-chart width="384px" }
January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0
```

January, February, March, April, May, June, July, August, September, October, November, December
James Smith, 65.0, 59.0, 80.0, 81.0, 56.0, 55.0, 40.0, 45.0, 49.0, 58.0, 68.0, 70.0
Derek Jones, 28.0, 48.0, 40.0, 19.0, 86.0, 27.0, 90.0, 65.0, 60.0, 45.0, 40.0, 35.0

Kuchendiagramm

``` {.pie-chart width="384px" }
January, February, March, April, May
James Smith, 25.0, 9.0, 18.0, 20.0, 27.0
```

January, February, March, April, May
James Smith, 25.0, 9.0, 18.0, 20.0, 27.0

Polardiagramm

``` {.polarArea-chart width="384px" }
January, February, March, April, May
James Smith, 25.0, 9.0, 18.0, 20.0, 27.0
```

January, February, March, April, May
James Smith, 25.0, 9.0, 18.0, 20.0, 27.0