MediaWiki:CharacterDistribution.js
From Illustrations in German Translations of Mark Twain's Works
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
document.addEventListener('DOMContentLoaded', () => {
// Container auf der Seite finden
const container = document.getElementById('chart-placeholder');
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');
// 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',
data: data,
options: {
responsive: true,
plugins: { legend: { display: true } },
scales: {
y: { beginAtZero: true }
}
}
};
new Chart(ctx, config);
});