|
|
| 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> | | </div> |
|
| |
|
| <script>
| |
| const canvas = document.getElementById('lineChart');
| |
| if (!canvas) return;
| |
|
| |
| // ResizeObserver überwacht, wann der Canvas eine echte Größe bekommt
| |
| const observer = new ResizeObserver(entries => {
| |
| for (let entry of entries) {
| |
| const {width, height} = entry.contentRect;
| |
| if (width > 0 && height > 0) {
| |
| observer.disconnect(); // Nur einmal starten
| |
| startChart();
| |
| }
| |
| }
| |
| });
| |
|
| |
| observer.observe(canvas);
| |
|
| |
| function startChart() {
| |
| mw.loader.load('https://cdn.jsdelivr.net/npm/chart.js', 'text/javascript', function() {
| |
| 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);
| |
| });
| |
| }
| |
| </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%.