|
|
| Zeile 897: |
Zeile 897: |
| } | | } |
| })(); | | })(); |
|
| |
|
| |
| // -Einzelauflistung unsichtbar-
| |
|
| |
| // --- Diagramm-Renderer mit optionalem Tabellen-Hide -------------------------
| |
| function renderMultiChart(block){
| |
| // nächste Tabelle NACH dem Container finden
| |
| let tbl = block.nextElementSibling;
| |
| while (tbl && tbl.tagName !== 'TABLE') tbl = tbl.nextElementSibling;
| |
| if (!tbl) return;
| |
|
| |
| // Daten aus der Tabelle lesen
| |
| const { labels, datasets } = buildDatasetsFromTable(tbl);
| |
| if (!labels.length || !datasets.length) return;
| |
|
| |
| // Tabelle verstecken, wenn data-hide-table="true"
| |
| const hide = (block.dataset.hideTable || '').toLowerCase() === 'true';
| |
| if (hide) {
| |
| tbl.setAttribute('aria-hidden','true');
| |
| tbl.style.display = 'none';
| |
| }
| |
|
| |
| // Canvas einsetzen
| |
| const wrap = document.createElement('div');
| |
| wrap.style.position = 'relative';
| |
| // mobile/desktop auto: 320px mobil, 450px ab ~768px
| |
| wrap.style.height = (window.matchMedia('(min-width: 768px)').matches ? '450px' : '320px');
| |
| wrap.style.width = '100%';
| |
|
| |
| const canvas = document.createElement('canvas');
| |
| wrap.appendChild(canvas);
| |
| block.innerHTML = '';
| |
| block.appendChild(wrap);
| |
|
| |
| const type = (block.dataset.type || 'line').toLowerCase(); // "line" | "bar"
| |
| const title = (block.dataset.title || '');
| |
|
| |
| // Lesbare Schriften & Legende für Mobile
| |
| const axisFont = { size: 12 };
| |
| const legendFont = { size: 13 };
| |
| const titleFont = { size: 16 };
| |
|
| |
| ensureChartJS(function(){
| |
| new Chart(canvas.getContext('2d'), {
| |
| type,
| |
| data: { labels, datasets },
| |
| options: {
| |
| responsive: true,
| |
| maintainAspectRatio: false,
| |
| interaction: { mode: 'nearest', intersect: false },
| |
| scales: {
| |
| y: { beginAtZero: true, ticks: { precision: 0, font: axisFont } },
| |
| x: { ticks: { font: axisFont } }
| |
| },
| |
| plugins: {
| |
| legend: { position: 'bottom', labels: { font: legendFont, boxWidth: 20 } },
| |
| title: { display: !!title, text: title, font: titleFont },
| |
| tooltip:{ backgroundColor: 'rgba(0,0,0,0.8)', titleFont: {size:14}, bodyFont: {size:13} }
| |
| },
| |
| elements: {
| |
| line: { tension: 0.25, borderWidth: 2 },
| |
| point: { radius: 3 }
| |
| }
| |
| }
| |
| });
| |
| });
| |
| }
| |
|
| |
| // --- Auto-Start auf jeder Seite --------------------------------------------
| |
| mw.hook('wikipage.content').add(function ($c) {
| |
| const scope = ($c && $c[0]) ? $c[0] : document;
| |
| const blocks = scope.querySelectorAll('.ados-chart-multi');
| |
| if (!blocks.length) return;
| |
| blocks.forEach(renderMultiChart);
| |
| });
| |