Wetterentwicklung in der Oberpfalz Script

Autor: Stephan Krohn Kategorie: Blog

Technische und funktionale Beschreibung des Wetter Diagramm Scripts

Das folgende Script erzeugt drei interaktive Wetterdiagramme für die Region Regenstauf. Es basiert auf der JavaScript‑Bibliothek Chart.js und wird vollständig im Browser ausgeführt, ohne Serveranfragen.

1. Temperaturdiagramm (Tag/Nacht)

Dieses Diagramm zeigt die langfristige Entwicklung der Tages‑ und Nachttemperaturen zwischen 1950 und 2020. Es verwendet einen line-Chart mit zwei Datenreihen:

Tagestemperatur – rote Linie (#e63946)
Nachttemperatur – blaue Linie (#457b9d)

Die Option tension: 0.3 sorgt für eine leicht geschwungene Darstellung der Linien.

2. Niederschlagsdiagramm

Das Niederschlagsdiagramm zeigt die jährliche Regenmenge in Millimetern. Es nutzt einen bar-Chart mit einer einzelnen Datenreihe.

Jahresniederschlag – dunkelblauer Balken (#1d3557)

Die Werte zeigen typische Schwankungen zwischen trockenen und feuchten Jahrzehnten.

3. Windgeschwindigkeitsdiagramm

Dieses Diagramm zeigt die durchschnittliche Windgeschwindigkeit in km/h über denselben Zeitraum. Es verwendet einen line-Chart mit einer Datenreihe:

Windgeschwindigkeit türkisgrüne Linie (#2a9d8f)

Die Daten zeigen einen leichten Anstieg der Böenhäufigkeit seit den 1980er Jahren.

4. Das vollständige Script

Quelltext zum Modul

</script>
<script>
// ---------------------------------------------------------
// Temperaturdiagramm (Tag/Nacht)
// ---------------------------------------------------------
new Chart(document.getElementById('tempChart'), {
  type: 'line',
  data: {
    labels: ['1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020'],
    datasets: [
      {
        label: 'Tagestemperatur (°C)',
        data: [12, 12.5, 13, 13.2, 14, 14.3, 14.7, 15.1],
        borderColor: '#e63946',
        backgroundColor: 'rgba(230,57,70,0.2)',
        tension: 0.3
      },
      {
        label: 'Nachttemperatur (°C)',
        data: [4, 4.2, 4.5, 5, 5.5, 6, 6.3, 6.5],
        borderColor: '#457b9d',
        backgroundColor: 'rgba(69,123,157,0.2)',
        tension: 0.3
      }
    ]
  }
});

// ---------------------------------------------------------
// Niederschlagsdiagramm
// ---------------------------------------------------------
new Chart(document.getElementById('rainChart'), {
  type: 'bar',
  data: {
    labels: ['1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020'],
    datasets: [{
      label: 'Jahresniederschlag (mm)',
      data: [760, 780, 740, 720, 700, 680, 650, 670],
      backgroundColor: '#1d3557'
    }]
  }
});

// ---------------------------------------------------------
// Windgeschwindigkeit
// ---------------------------------------------------------
new Chart(document.getElementById('windChart'), {
  type: 'line',
  data: {
    labels: ['1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020'],
    datasets: [{
      label: 'Windgeschwindigkeit (km/h)',
      data: [10, 10.5, 11, 11.2, 11.5, 12, 12.3, 12.5],
      borderColor: '#2a9d8f',
      backgroundColor: 'rgba(42,157,143,0.2)',
      tension: 0.3
    }]
  }
});
</script>">

5. Zusammenfassung

Das Script erzeugt drei vollständig interaktive Diagramme, die historische Wetterdaten übersichtlich darstellen. Es ist leicht erweiterbar, responsiv und ideal für Joomla‑6‑Artikel, technische Berichte oder wissenschaftliche Dokumentationen.

SK-REG BLOG