|
|
| (One intermediate revision by the same user not shown) |
| Line 8: |
Line 8: |
|
| |
|
| <html> | | <html> |
| | <!-- Chart Container --> |
| <div class="chart-container"> | | <div class="chart-container"> |
| <canvas id="lineChart"></canvas> | | <canvas id="lineChart"></canvas> |
| <div id="canvas-size" style="margin-top:5px; font-size:0.9em; color:gray;">
| |
| Canvas-Größe: <span id="canvas-width">0</span> x <span id="canvas-height">0</span>
| |
| </div>
| |
| <div id="debug-marker" style="margin-top:2px; font-size:0.9em; color:red;">
| |
| Canvas verfügbar: <span id="canvas-ready">❌</span>
| |
| </div>
| |
| </div> | | </div> |
|
| |
|
| <script>
| |
| // Debug-Elemente
| |
| const canvas = document.getElementById('lineChart');
| |
| const wSpan = document.getElementById('canvas-width');
| |
| const hSpan = document.getElementById('canvas-height');
| |
| const marker = document.getElementById('canvas-ready');
| |
|
| |
|
| // Polling-Funktion, bis Canvas sichtbar ist
| |
| function checkCanvas() {
| |
| if (!canvas) return requestAnimationFrame(checkCanvas);
| |
| const rect = canvas.getBoundingClientRect();
| |
| wSpan.textContent = Math.round(rect.width);
| |
| hSpan.textContent = Math.round(rect.height);
| |
|
| |
| if (rect.width > 0 && rect.height > 0) {
| |
| marker.textContent = '✅';
| |
| startChart();
| |
| } else {
| |
| requestAnimationFrame(checkCanvas);
| |
| }
| |
| }
| |
|
| |
| // Chart starten
| |
| function startChart() {
| |
| if (window.chartStarted) return; // Verhindert Doppelstart
| |
| window.chartStarted = true;
| |
|
| |
| // Chart.js laden
| |
| mw.loader.load('https://cdn.jsdelivr.net/npm/chart.js', 'text/javascript', function() {
| |
| console.log("Chart.js geladen:", typeof Chart);
| |
|
| |
| const ctx = canvas.getContext('2d');
| |
|
| |
| const data = {
| |
| labels: ['Kemble (1885)', 'Schröder (1898)', 'Hirth (1920)', 'Trier (1936)', 'Harder (1938)', 'Kellerer (1938)', 'Busoni (1940)','Bebié (1944)'],
| |
| datasets: [
| |
| { label: 'Huck', data: [47.40,50.98,72.22,54.29,93.10,50.00,54.10,69.81], backgroundColor:'red', borderColor:'red', borderWidth:1, barPercentage:0.8 },
| |
| { label: 'Jim', data: [17.92,29.41,22.22,28.57,44.83,18.18,26.23,17.00], backgroundColor:'blue', borderColor:'blue', borderWidth:1, barPercentage:0.8 },
| |
| { label: 'Pap Finn', data: [5.78,7.84,5.56,5.71,6.90,9.09,4.92,1.88], backgroundColor:'green', borderColor:'green', borderWidth:1, barPercentage:0.8 },
| |
| { label: 'King/Duke', data: [13.29,13.73,16.67,20.00,17.24,9.09,16.39,3.77], backgroundColor:'orange', borderColor:'orange', borderWidth:1, barPercentage:0.8 },
| |
| { label: 'Tom', data: [11.56,7.84,19.44,11.43,24.14,9.09,11.48,13.21], backgroundColor:'black', borderColor:'black', borderWidth:1, barPercentage:0.8 },
| |
| { label: 'Others', data: [38.73,29.41,36.11,31.43,17.24,31.82,22.95,13.21], backgroundColor:'pink', borderColor:'pink', borderWidth:1, barPercentage:0.8 },
| |
| { type: 'scatter', label:'Total # of Illustrations', data:[173,51,36,35,29,22,61,53], borderColor:'purple', borderWidth:3, xAxisID:'x2', pointStyle:'cross', pointRadius:8, pointHoverRadius:10, showLine:false }
| |
| ]
| |
| };
| |
|
| |
| const config = {
| |
| type:'bar',
| |
| data:data,
| |
| options:{
| |
| indexAxis:'y',
| |
| responsive:true,
| |
| plugins:{ legend:{ display:true }, tooltip:{ mode:'index', intersect:false } },
| |
| interaction:{ mode:'nearest', axis:'y', intersect:false },
| |
| scales:{
| |
| y:{ display:true, title:{ display:true, text:'Illustrator (Year)' }, stacked:false, barThickness:30 },
| |
| x:{ display:true, position:'top', title:{ display:true, text:'% of Illustrations Featuring Character' }, min:0, max:100 },
| |
| x2:{ display:true, position:'bottom', title:{ display:true, text:'Total # of Illustrations' }, min:0, max:180, grid:{ drawOnChartArea:false } }
| |
| }
| |
| }
| |
| };
| |
|
| |
| new Chart(ctx, config);
| |
| });
| |
| }
| |
|
| |
| // Start Polling
| |
| requestAnimationFrame(checkCanvas);
| |
| </script>
| |
|
| |
|
|
| |
|
| </html> | | </html> |
Displayed in the chart below is the relative distribution of characters (top x-axis) across various illustrated editions of Adventures of Huckleberry Finn cataloged on this webpage. Each colored bar represents a different character, while the y-axis lists the editions in chronological order. At the bottom, the second x-axis shows the total number of illustrations in these editions.
Please note that many illustrations feature multiple characters. Therefore, adding the individual values of all characters appearing in a single edition will yield a number greater than 100%.