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') !== ' | if (mw.config.get('wgPageName') !== 'Wiki/chardist') return; | ||
// | |||
// Container suchen | |||
const container = document.getElementById('chart-placeholder'); | const container = document.getElementById('chart-placeholder'); | ||
if (!container) return; | if (!container) { | ||
console.log("Kein chart-placeholder gefunden."); | |||
return; | |||
} | |||
// Canvas | // Canvas hinzufügen | ||
const canvas = document.createElement('canvas'); | const canvas = document.createElement('canvas'); | ||
canvas.id = ' | canvas.id = 'testChart'; | ||
container.appendChild(canvas); | container.appendChild(canvas); | ||
const ctx = canvas.getContext('2d'); | const ctx = canvas.getContext('2d'); | ||
// - | // Minimaler Test-Bar-Chart | ||
new Chart(ctx, { | |||
type: 'bar', | type: 'bar', | ||
data: data, | data: { | ||
labels: ['A', 'B', 'C'], | |||
datasets: [{ | |||
label: 'Test-Daten', | |||
data: [10, 20, 30], | |||
backgroundColor: ['red', 'green', 'blue'] | |||
}] | |||
}, | |||
options: { | options: { | ||
responsive: true, | responsive: true, | ||
plugins: { | plugins: { | ||
legend: { display: true | legend: { display: true } | ||
} | } | ||
} | } | ||
}; | }); | ||
console.log("Test-Chart initialisiert."); | |||
}); | }); | ||
Revision as of 18:57, 31 August 2025
console.log("wgPageName =", mw.config.get('wgPageName'));
document.addEventListener('DOMContentLoaded', () => {
// Prüfen, ob wir auf der richtigen Seite sind
if (mw.config.get('wgPageName') !== 'Wiki/chardist') return;
// Container suchen
const container = document.getElementById('chart-placeholder');
if (!container) {
console.log("Kein chart-placeholder gefunden.");
return;
}
// Canvas hinzufügen
const canvas = document.createElement('canvas');
canvas.id = 'testChart';
container.appendChild(canvas);
const ctx = canvas.getContext('2d');
// Minimaler Test-Bar-Chart
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,
plugins: {
legend: { display: true }
}
}
});
console.log("Test-Chart initialisiert.");
});