MediaWiki

CharacterDistribution.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older edit
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
console.log('CharacterDistribution.js läuft');
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
    // Container auf der Seite finden
     const canvas = document.getElementById('testChart');
     const container = document.getElementById('chart-placeholder');
     if (!canvas) return; // Abbruch, falls Canvas noch nicht existiert
     if (!container) return; // Abbruch, falls Container nicht gefunden
 
    // Canvas erzeugen und an Container anhängen
    const canvas = document.createElement('canvas');
    canvas.id = 'testChart';
    canvas.width = 800;
    canvas.height = 400;
    container.appendChild(canvas);


     const ctx = canvas.getContext('2d');
     const ctx = canvas.getContext('2d');
 
     new Chart(ctx, {
     // Minimaler Balken-Chart
    const data = {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
            label: 'Test-Daten',
            data: [10, 20, 30, 25],
            backgroundColor: ['red', 'blue', 'green', 'orange'],
            borderColor: ['red', 'blue', 'green', 'orange'],
            borderWidth: 1
        }]
    };
 
    const config = {
         type: 'bar',
         type: 'bar',
         data: data,
         data: {
        options: {
             labels: ['A', 'B', 'C'],
             responsive: true,
             datasets: [{
             plugins: { legend: { display: true } },
                label: 'Test',
            scales: {
                data: [1, 2, 3],
                 y: { beginAtZero: true }
                 backgroundColor: 'red'
            }
            }]
         }
        },
     };
         options: {}
     });


     new Chart(ctx, config);
     console.log('Chart sollte jetzt angezeigt werden');
});
});

Latest revision as of 19:21, 31 August 2025

console.log('CharacterDistribution.js läuft');

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('testChart');
    if (!canvas) return;  // Abbruch, falls Canvas noch nicht existiert

    const ctx = canvas.getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['A', 'B', 'C'],
            datasets: [{
                label: 'Test',
                data: [1, 2, 3],
                backgroundColor: 'red'
            }]
        },
        options: {}
    });

    console.log('Chart sollte jetzt angezeigt werden');
});
Retrieved from "https://illus.twainframe.org/index.php?title=MediaWiki:CharacterDistribution.js&oldid=1061"