MediaWiki

CharacterDistribution.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
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;
     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);
});
});

Revision as of 19:18, 31 August 2025

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('testChart');
    if (!canvas) return;

    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: {}
    });
});
Retrieved from "https://illus.twainframe.org/index.php?title=MediaWiki:CharacterDistribution.js&oldid=1056"