Wiki/chardist: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older editNewer edit →
VisualWikitext
No edit summary
No edit summary
Line 10: Line 10:
<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>
<script>
  // Debug-Elemente
   const canvas = document.getElementById('lineChart');
   const canvas = document.getElementById('lineChart');
   const wSpan = document.getElementById('canvas-width');
   if (!canvas) return;
  const hSpan = document.getElementById('canvas-height');
  const marker = document.getElementById('canvas-ready');


   // Polling-Funktion, bis Canvas sichtbar ist
   // ResizeObserver überwacht, wann der Canvas eine echte Größe bekommt
   function checkCanvas() {
   const observer = new ResizeObserver(entries => {
     if (!canvas) return requestAnimationFrame(checkCanvas);
     for (let entry of entries) {
    const rect = canvas.getBoundingClientRect();
      const {width, height} = entry.contentRect;
    wSpan.textContent = Math.round(rect.width);
      if (width > 0 && height > 0) {
     hSpan.textContent = Math.round(rect.height);
        observer.disconnect(); // Nur einmal starten
        startChart();
      }
     }
  });


    if (rect.width > 0 && rect.height > 0) {
  observer.observe(canvas);
      marker.textContent = '✅';
      startChart();
    } else {
      requestAnimationFrame(checkCanvas);
    }
  }


  // Chart starten
   function startChart() {
   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() {
     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 ctx = canvas.getContext('2d');


Line 83: Line 65:
     });
     });
   }
   }
</script>


  // Start Polling
  requestAnimationFrame(checkCanvas);
</script>




</html>
</html>

Revision as of 18:36, 6 October 2025


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%.


Retrieved from "https://illus.twainframe.org/index.php?title=Wiki/chardist&oldid=1987"