HTML: Chart erstellen - So gehts

Das Erstellen von Charts in HTML ermöglicht es uns, komplexe Informationen auf einfache und ansprechende Weise darzustellen. In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du in HTML Charts erstellen kannst.

HTML: Charts erstellen – So gehts

Schritt 1: HTML-Grundstruktur erstellen
Erstelle ein neues HTML-Dokument und erstelle die Grundstruktur mit den notwendigen Tags. Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
    <title>Charts erstellen</title>
    <style>
        /* Hier kannst du optional CSS-Stile für deine Charts definieren */
    </style>
</head>
<body>
    <canvas id="chart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

Schritt 2: Chart.js-Bibliothek einbinden
Füge die Chart.js-Bibliothek in dein HTML-Dokument ein, um die Erstellung und Darstellung der Charts zu ermöglichen. Du kannst die aktuelle Version von dieser CDNs (Content Delivery Network) einbinden:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Schritt 3: Chart erstellen
Erstelle eine JavaScript-Datei (zum Beispiel „script.js“) und verbinde sie mit deinem HTML-Dokument (siehe Schritt 1). In dieser Datei erstellst du deine Charts.

Charts.js Dokumentation

Zum Beispiel:

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar', // Ändere den Chart-Typ nach Bedarf (bar, line, pie, usw.)
    data: {
        labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'],
        datasets: [{
            label: 'Umsatz',
            data: [2500, 1800, 3500, 2000, 2800, 3200],
            backgroundColor: 'rgba(0, 123, 255, 0.5)', // Ändere die Hintergrundfarbe nach Bedarf
            borderColor: 'rgba(0, 123, 255, 1)', // Ändere die Rahmenfarbe nach Bedarf
            borderWidth: 1 // Ändere die Rahmenbreite nach Bedarf
        }]
    },
    options: {
        // Hier kannst du weitere Optionen und Anpassungen vornehmen
    }
});

Gesamter HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Charts erstellen</title>
    <style>
        /* Hier kannst du optional CSS-Stile für deine Charts definieren */
    </style>

</head>
<body>
    <canvas id="chart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar', // Ändere den Chart-Typ nach Bedarf (bar, line, pie, usw.)
    data: {
        labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni'],
        datasets: [{
            label: 'Umsatz',
            data: [2500, 1800, 3500, 2000, 2800, 3200],
            backgroundColor: 'rgba(0, 123, 255, 0.5)', // Ändere die Hintergrundfarbe nach Bedarf
            borderColor: 'rgba(0, 123, 255, 1)', // Ändere die Rahmenfarbe nach Bedarf
            borderWidth: 1 // Ändere die Rahmenbreite nach Bedarf
        }]
    },
    options: {
        // Hier kannst du weitere Optionen und Anpassungen vornehmen
    }
});
</script>
</body>
</html>

Schritt 4: Daten anpassen
Passe die Daten (labels, datasets) in „script.js“ entsprechend deiner Bedürfnisse an. Füge weitere Labels und Datensätze hinzu, um mehr Informationen darzustellen.

Ergebnis

Charts erstellen

Schritt 5: Teste und Passe an
Öffne dein HTML-Dokument in einem Webbrowser, um den erstellten Chart anzuzeigen. Passe die Chart-Konfiguration weiter an, um deine gewünschte Darstellung zu erreichen. Überprüfe die Chart.js-Dokumentation für weitere Details und Möglichkeiten.

Beispiele von Charts.js

Mit dieser einfachen jedoch leistungsstarken Methode kannst du nun in HTML ansprechende Charts erstellen und komplexe Informationen auf einen Blick darstellen. Viel Spaß beim Experimentieren und Erstellen deiner eigenen Charts!

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

html html charts