MediaWiki

CharacterDistribution.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

No edit summary
No edit summary
Line 1: Line 1:
console.log("wgPageName =", mw.config.get('wgPageName'));
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
    // Prüfen, ob wir auf der richtigen Seite sind
     if (mw.config.get('wgPageName') !== 'Wiki/chardist') return;
     if (mw.config.get('wgPageName') !== 'Wiki/chardist') return;


    // Container suchen
     const container = document.getElementById('chart-placeholder');
     const container = document.getElementById('chart-placeholder');
     if (!container) {
     if (!container) return;
        console.log("Kein chart-placeholder gefunden.");
        return;
    }


    // Canvas hinzufügen
     const canvas = document.createElement('canvas');
     const canvas = document.createElement('canvas');
     canvas.id = 'testChart';
     canvas.id = 'testChart';
Line 19: Line 11:
     const ctx = canvas.getContext('2d');
     const ctx = canvas.getContext('2d');


    // Minimaler Test-Bar-Chart
     new Chart(ctx, {
     new Chart(ctx, {
         type: 'bar',
         type: 'bar',
Line 30: Line 21:
             }]
             }]
         },
         },
         options: {
         options: { responsive: true }
            responsive: true,
            plugins: {
                legend: { display: true }
            }
        }
     });
     });


     console.log("Test-Chart initialisiert.");
     console.log("Test-Chart initialisiert.");
});
});

Revision as of 18:58, 31 August 2025

document.addEventListener('DOMContentLoaded', () => {
    if (mw.config.get('wgPageName') !== 'Wiki/chardist') return;

    const container = document.getElementById('chart-placeholder');
    if (!container) return;

    const canvas = document.createElement('canvas');
    canvas.id = 'testChart';
    container.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['A', 'B', 'C'],
            datasets: [{
                label: 'Test-Daten',
                data: [10, 20, 30],
                backgroundColor: ['red', 'green', 'blue']
            }]
        },
        options: { responsive: true }
    });

    console.log("Test-Chart initialisiert.");
});