schuelerzahlen
This commit is contained in:
parent
639f1ffa32
commit
96e21cc2d8
@ -8,43 +8,334 @@ gallery: false
|
|||||||
aliases:
|
aliases:
|
||||||
- /schulchronik/pages/schülerzahlen
|
- /schulchronik/pages/schülerzahlen
|
||||||
---
|
---
|
||||||
|Schuljahr|Schülerzahlen gesamt|davon Mädchen|Anteil Mädchen in %|
|
<style>
|
||||||
|---|---|---|---|
|
#chart-container {
|
||||||
|1988/1989|54|11|20,3|
|
position: relative;
|
||||||
|1989/1990|101|14|13,8|
|
height: 70vh;
|
||||||
|1990/1991|173|36|20,8|
|
overflow: hidden;
|
||||||
|1991/1992|340|70|20,6|
|
}
|
||||||
|1992/1993|397|99|24,9|
|
</style>
|
||||||
|1993/1994|446|122|27,4|
|
|
||||||
|1994/1995|501|133|26,5|
|
|
||||||
|1995/1996|523|149|28,5|
|
|
||||||
|1996/1997|555|162|29,2|
|
|
||||||
|1997/1998|551|163|29,6|
|
|
||||||
|1998/1999|526|152|28,9|
|
|
||||||
|1999/2000|581|177|30,5|
|
|
||||||
|2000/2001|540|168|31,1|
|
|
||||||
|2001/2002|595|179|30,1|
|
|
||||||
|2002/2003|587|176|30,0|
|
|
||||||
|2003/2004|605|186|30,7|
|
|
||||||
|2004/2005|618|183|29,6|
|
|
||||||
|2005/2006|604|182|30,1|
|
|
||||||
|2006/2007|594|175|29,5|
|
|
||||||
|2007/2008|519|139|26,8|
|
|
||||||
|2008/2009|509|136|26,7|
|
|
||||||
|2009/2010|513|135|26,3|
|
|
||||||
|2010/2011|509|137|26,9|
|
|
||||||
|2011/2012|514|139|27,0|
|
|
||||||
|2012/2013|504|132|26,2|
|
|
||||||
|2013/2014|524|127|24,2|
|
|
||||||
|2014/2015|536|137|25,6|
|
|
||||||
|2015/2016|525|139|26,5|
|
|
||||||
|2016/2017|527|138|26,2|
|
|
||||||
|2017/2018|522|135|25,9|
|
|
||||||
|2018/2019|531|138|26,0|
|
|
||||||
|2019/2020|537|141|26,3|
|
|
||||||
|
|
||||||
## Schülerzahlen
|
<div id="chart-container"></div>
|
||||||
|
<script>
|
||||||
|
var dom = document.getElementById("chart-container");
|
||||||
|
echarts.registerLocale("DE", {
|
||||||
|
time: {
|
||||||
|
month: [
|
||||||
|
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
|
||||||
|
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
|
||||||
|
],
|
||||||
|
monthAbbr: [
|
||||||
|
'Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun',
|
||||||
|
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
|
||||||
|
],
|
||||||
|
dayOfWeek: [
|
||||||
|
'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'
|
||||||
|
],
|
||||||
|
dayOfWeekAbbr: [
|
||||||
|
'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
selector: {
|
||||||
|
all: 'Alle',
|
||||||
|
inverse: 'Invertiert'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
brush: {
|
||||||
|
title: {
|
||||||
|
rect: 'Box Auswahl',
|
||||||
|
polygon: 'Lasso Auswahl',
|
||||||
|
lineX: 'Horizontale Auswahl',
|
||||||
|
lineY: 'Vertikale Auswahl',
|
||||||
|
keep: 'Bereich Auswahl',
|
||||||
|
clear: 'Auswahl zurücksetzen'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataView: {
|
||||||
|
title: 'Daten Ansicht',
|
||||||
|
lang: ['Daten Ansicht', 'Schließen', 'Aktualisieren']
|
||||||
|
},
|
||||||
|
dataZoom: {
|
||||||
|
title: {
|
||||||
|
zoom: 'Zoom',
|
||||||
|
back: 'Zoom zurücksetzen'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
magicType: {
|
||||||
|
title: {
|
||||||
|
line: 'Zu Liniendiagramm wechseln',
|
||||||
|
bar: 'Zu Balkendiagramm wechseln',
|
||||||
|
stack: 'Stapel',
|
||||||
|
tiled: 'Kachel'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
restore: {
|
||||||
|
title: 'Wiederherstellen'
|
||||||
|
},
|
||||||
|
saveAsImage: {
|
||||||
|
title: 'Als Bild speichern',
|
||||||
|
lang: ['Rechtsklick zum Speichern des Bildes']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
typeNames: {
|
||||||
|
pie: 'Tortendiagramm',
|
||||||
|
bar: 'Balkendiagramm',
|
||||||
|
line: 'Liniendiagramm',
|
||||||
|
scatter: 'Streudiagramm',
|
||||||
|
effectScatter: 'Welligkeits-Streudiagramm',
|
||||||
|
radar: 'Radar-Karte',
|
||||||
|
tree: 'Baum',
|
||||||
|
treemap: 'Baumkarte',
|
||||||
|
boxplot: 'Boxplot',
|
||||||
|
candlestick: 'Kerzenständer',
|
||||||
|
k: 'K Liniendiagramm',
|
||||||
|
heatmap: 'Heatmap',
|
||||||
|
map: 'Karte',
|
||||||
|
parallel: 'Parallele Koordinatenkarte',
|
||||||
|
lines: 'Liniendiagramm',
|
||||||
|
graph: 'Beziehungsgrafik',
|
||||||
|
sankey: 'Sankey-Diagramm',
|
||||||
|
funnel: 'Trichterdiagramm',
|
||||||
|
gauge: 'Meßanzeige',
|
||||||
|
pictorialBar: 'Bildlicher Balken',
|
||||||
|
themeRiver: 'Thematische Flusskarte',
|
||||||
|
sunburst: 'Sonnenausbruch'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
aria: {
|
||||||
|
general: {
|
||||||
|
withTitle: 'Dies ist ein Diagramm über "{title}"',
|
||||||
|
withoutTitle: 'Dies ist ein Diagramm'
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
single: {
|
||||||
|
prefix: '',
|
||||||
|
withName: ' mit Typ {seriesType} namens {seriesName}.',
|
||||||
|
withoutName: ' mit Typ {seriesType}.'
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
prefix: '. Es besteht aus {seriesCount} Serienzählung.',
|
||||||
|
withName: ' Die Serie {seriesId} ist ein {seriesType} welcher {seriesName} darstellt.',
|
||||||
|
withoutName: ' Die {seriesId}-Reihe ist ein {seriesType}.',
|
||||||
|
separator: {
|
||||||
|
middle: '',
|
||||||
|
end: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
allData: 'Die Daten sind wie folgt: ',
|
||||||
|
partialData: 'Die ersten {displayCnt} Elemente sind: ',
|
||||||
|
withName: 'die Daten für {name} sind {value}',
|
||||||
|
withoutName: '{value}',
|
||||||
|
separator: {
|
||||||
|
middle: ',',
|
||||||
|
end: '.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var chart = echarts.init(dom, null, {
|
||||||
|
renderer: "canvas",
|
||||||
|
useDirtyRect: false,
|
||||||
|
locale: "DE"
|
||||||
|
});
|
||||||
|
var option;
|
||||||
|
jQuery.get("/data/schuelerzahlen.json",
|
||||||
|
function (data) {
|
||||||
|
chart.setOption(
|
||||||
|
(option = {
|
||||||
|
title: {
|
||||||
|
text: "Schülerzahlen",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// Use axis to trigger tooltip
|
||||||
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: data['schuelerzahlen'].map(function (item) {
|
||||||
|
return item['year'];
|
||||||
|
})
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
min: 0,
|
||||||
|
inverse: false
|
||||||
|
}, {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
toolbox: {
|
||||||
|
right: 10,
|
||||||
|
feature: {
|
||||||
|
dataZoom: {
|
||||||
|
yAxisIndex: "none"
|
||||||
|
},
|
||||||
|
restore: {},
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
startValue: "1988"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "inside"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
/*visualMap: {
|
||||||
|
top: 50,
|
||||||
|
right: 10,
|
||||||
|
precision: 1,
|
||||||
|
pieces: [
|
||||||
|
{
|
||||||
|
gt: 0.9,
|
||||||
|
lte: 1.0,
|
||||||
|
color: "#005da9",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 1.0,
|
||||||
|
lte: 1.5,
|
||||||
|
color: "#0b9834"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 1.5,
|
||||||
|
lte: 2.0,
|
||||||
|
color: "#93CE07"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 2.0,
|
||||||
|
lte: 2.5,
|
||||||
|
color: "#FBDB0F"
|
||||||
|
},
|
||||||
|
/*{
|
||||||
|
gt: 2.0,
|
||||||
|
lte: 2.5,
|
||||||
|
color: "#FC7D02"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
outOfRange: {
|
||||||
|
color: "#999"
|
||||||
|
}
|
||||||
|
},*/
|
||||||
|
series: [{
|
||||||
|
name: "Jungen",
|
||||||
|
type: "bar",
|
||||||
|
stack: "total",
|
||||||
|
color: "#7099dc",
|
||||||
|
data: data['schuelerzahlen'].map(function (item) {
|
||||||
|
return item['all'] - item['girls'];
|
||||||
|
}),
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#333"
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
yAxis: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 500
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Mädchen",
|
||||||
|
type: "bar",
|
||||||
|
color: "#ff6a6a",
|
||||||
|
stack: "total",
|
||||||
|
data: data['schuelerzahlen'].map(function (item) {
|
||||||
|
return item['girls'];
|
||||||
|
}),
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#333"
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
yAxis: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 500
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Insgesamt",
|
||||||
|
color: "#98e17f",
|
||||||
|
type: "line",
|
||||||
|
data: data['schuelerzahlen'].map(function (item) {
|
||||||
|
return item['all'];
|
||||||
|
}),
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#333"
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
yAxis: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 500
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Anteil Mädchen",
|
||||||
|
type: "line",
|
||||||
|
color: "#dc9870",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: data['schuelerzahlen'].map(function (item) {
|
||||||
|
return (item['girls']/item['all']*100).toFixed(2);;
|
||||||
|
}),
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#333"
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
yAxis: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 500
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (option && typeof option === "object") {
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
window.addEventListener("resize", chart.resize);
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
[
|
{ "schuelerzahlen": [
|
||||||
{
|
{
|
||||||
"year": 1988,
|
"year": 1988,
|
||||||
"all": 54,
|
"all": 54,
|
||||||
@ -174,4 +174,5 @@
|
|||||||
"all": 534,
|
"all": 534,
|
||||||
"girls": 137
|
"girls": 137
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user