Erstellen Sie ein dynamisches Dashboard mit ChartJS

() translation by (you can also view the original English article)

Heute werden wir mithilfe von ChartJS ein dynamisches Dashboard mit Live-Diagrammen erstellen. ChartJS ist eine leistungsstarke, abhängigkeitsfreie JavaScript-Bibliothek, die Diagramme über das Canvas-Element erstellt. Das Beste ist, dass Designer problemlos einsatzbereit sind. Wir konzentrieren uns auf die Teile der Bibliothek, mit denen Sie schnell schöne und funktionale Diagramme erstellen können. Wir werden von Anfang bis Ende ein mobilfreundliches Dashboard erstellen.

Suchen Sie eine schnelle Lösung?

Wenn Sie nach einer schnellen Lösung suchen, gibt es bei Envato Market eine großartige Sammlung von Diagramm- und Diagrammskripten. Ab nur wenigen Dollar können Sie diese Funktionalität schnell auf Ihre Website oder App übertragen. Hier ist einer unserer Favoriten - "Chartli" - zum Erstellen interaktiver Grafiken (die wunderschön aussehen!)

Loslegen

Wir werden unser Dashboard auf HTML5 Boilerplate aufbauen. Laden Sie die Zip-Datei herunter oder klonen Sie das Repository über Git. Wir werden unser Projektverzeichnis "chartjs_dashboard" nennen und alle Dateien direkt dort ablegen.

1	# On the command line
2	git clone git@github.com:h5bp/html5-boilerplate.git chartjs_dashboard

Als nächstes greifen wir zu ChartJS. Gehen Sie zur uminifizierten Version unter raw.github.com/nnnick/Chart.js/master/Chart.js und kopieren Sie den Inhalt in Ihre Datei js/plugins.js. Wenn Sie die nicht minimierte Version haben, werden Fehler besser lesbar, wenn Sie auf sie stoßen.

Tipp: In der Produktion würden Sie die minimierte Version des JavaScript verwenden, um das Dashboard leistungsfähiger zu machen.

Ihre Dateistruktur sollte folgendermaßen aussehen:

├── 404.html   
├── crossdomain.xml   
├── css   
│   ├── main.css   
│   └── normalize.css   
├── favicon.ico   
├── img   
├── index.html   
├── js   
│   ├── main.js   
│   ├── plugins.js   
│   └── vendor   
│       ├── jquery-1.10.1.min.js   
│       └── modernizr-2.6.2.min.js   
└── robots.txt

Hinweis: Einige der in H5BP enthaltenen Dateien, die wir nicht verwenden, sind nicht enthalten.

Farbpalette

Bevor wir uns mit der Codierung der Site befassen, richten wir zunächst eine Farbpalette ein, die wir im gesamten Design verwenden werden. Auf diese Weise können wir eine Art zukünftigen "Styleguide" erstellen. Dies ist eine gängige Praxis für grundsätzlich jedes Design.

Wenn Sie das Dashboard für eine bestimmte Marke erstellen, verwenden Sie zunächst die Farben der Marke. Heute werden wir zwei Hauptfarben und zwei Nebenfarben definieren. Wir werden auch Schattierungen oder ausgeblendete Versionen dieser Farben verwenden.

dunkelblau: #637b85
grün: #2c9c69
gelb: #dbba34
rot: #c62f29

Wir werden auch einen helleren dunkelblauen Farbton verwenden, #d0dde3. Zuletzt werden wir Graustufenfarben verwenden.

ChartJS-Grundlagen

ChartJS verwendet das Canvas-Element. Das Canvas-Element bietet eine Nur-JavaScript-Oberfläche zum Zeichnen von Pixeln in einen bestimmten Rechteckbereich. Es wird häufig mit SVG verglichen, das eine auf DOM-Knoten basierende Lösung zum Erstellen von Vektorgrafiken im Browser bietet. Auf das Canvas-Element gezeichnete Pixel werden jedoch nicht gespeichert und reagieren daher nicht auf JavaScript-Ereignisse.

Aber genug mit dem Tech-Talk - wie fangen wir schnell mit ChartJS an?

Glücklicherweise enthält die ChartJS-Homepage viele Beispiele, mit denen wir schnell loslegen können. Das Grundmuster besteht darin, das Canvas-Element in HTML zu erstellen, es mit JavaScript auszuwählen und das Diagramm zu erstellen, während die Daten übergeben werden, aus denen das Diagramm erstellt wurde.

<canvas id="something"></canvas>
<script>
var canvas = document.getElementById("something");
var ctx = canvas.getContext("2d");
new Chart(ctx).Line(data, options);
</script>

Im obigen Beispiel wird davon ausgegangen, dass Sie "Daten" und "Optionen" als Objekte definiert haben, und es wird ein entsprechendes Liniendiagramm erstellt.

In unserem Beispiel verwenden wir das Donut-Diagramm, das Liniendiagramm und das Radar-Diagramm. Diese Diagramme stellen verschiedene geschäftsorientierte Metriken dar, aber natürlich können Sie diese verwenden und an Ihre Bedürfnisse anpassen.

Seiten-Markup

Beginnen wir mit der Definition von grundlegendem HTML für das Layout unserer Seite.

<div class="wrapper">
<header>
	<div class="container clearfix">
        <h1>Overview <span>July 8-12, 2013</span><a class="button">Change Date Range</a></h1>
    </div>
</header>
<div class="container clearfix">
    <div class="third widget doughnut">
        <h3>Breakdown of Hours</h3>
        <div class="canvas-container">
            <canvas id="hours"></canvas>
        </div>
    </div>
    <div class="third widget line">
        <div class="chart-legend">
            <h3>Shipments per Day</h3>
        </div>
        <div class="canvas-container">
            <canvas id="shipments"></canvas>
        </div>
    </div>
    <div class="third widget">
        <div class="chart-legend">
            <h3>Customer Service Assessment</h3>
        </div>
        <div class="canvas-container">
            <canvas id="departments"></canvas>
        </div>
    </div>
</div>
<div class="push"></div>
</div>
<footer>
</footer>

Hier können wir sehen, dass wir einen grundlegenden Kopf-, Mittel- und Fußzeilenabschnitt haben. Wir verwenden die Klassen .wrapper und .push, um eine klebrige Fußzeile zu erstellen (weitere Informationen finden Sie hier). Wir werden unser Layout so gestalten, dass es zuerst mobilfreundlich ist und von dort aus skaliert werden kann. Es gibt ein paar Tricks, die wir auf dem Weg ziehen werden, aber diese Struktur wird einen Großteil der Arbeit für uns erledigen.

Bevor wir zu weit gehen...

Beachten Sie, dass Canvas bei Medienabfragen nicht besonders gut funktioniert. In diesem Tutorial erstellen wir eine Problemumgehung, damit die Diagramme in JavaScript in verschiedenen Größen neu gezeichnet werden können.

In unserer Datei main.js benötigen wir eine Größenfunktion, die durch eine Größenänderung des Fensters ausgelöst wird. Wir benötigen auch eine "redraw"-Funktion, um nach dem Auslösen der Größenänderungsfunktion ausgelöst zu werden. Wenn wir die Diagramme neu zeichnen, möchten wir nicht, dass sie animiert werden, als ob dies das erste Mal ist, dass sie gezeichnet werden.

(function(){
// set up the timeout variable
var t;
// setup the sizing function,
// with an argument that tells the chart to animate or not
function size(animate){
    // If we are resizing, we don't want the charts drawing on every resize event.
    // This clears the timeout so that we only run the sizing function
    // when we are done resizing the window
    clearTimeout(t);
    // This will reset the timeout right after clearing it.
    t = setTimeout(function(){
        $("canvas").each(function(i,el){
            // Set the canvas element's height and width to it's parent's height and width.
            // The parent element is the div.canvas-container
            $(el).attr({
                "width":$(el).parent().width(),
                "height":$(el).parent().outerHeight()
            });
        });
        // kickoff the redraw function, which builds all of the charts.
        redraw(animate);

        // loop through the widgets and find the tallest one, and set all of them to that height.
        var m = 0;
        // we have to remove any inline height setting first so that we get the automatic height.
        $(".widget").height("");
        $(".widget").each(function(i,el){ m = Math.max(m,$(el).height()); });
        $(".widget").height(m);

    }, 100); // the timeout should run after 100 milliseconds
}
$(window).on('resize', size);
function redraw(animation){
    var options = {};
    if (!animation){
        options.animation = false;
    } else {
        options.animation = true;
    }
    // ....
        // the rest of our chart drawing will happen here
    // ....
}
size(); // this kicks off the first drawing; note that the first call to size will animate the charts in.

Wenn dies ein wenig entmutigend erscheint, machen Sie sich keine Sorgen! Stellen Sie eine Frage in den Kommentaren, und wir und die Tuts+ Community werden Ihnen helfen, alles zu verstehen!

Einige CSS für den Einstieg

Wir möchten einige grundlegende CSS-Strukturen einrichten, um uns den Einstieg zu erleichtern. HTML5 Boilerplate enthält natürlich Normalisierung und einige andere Standardeinstellungen, die Sie ändern können, aber für das Tutorial schreiben wir unser CSS nach der Zeile "Benutzerdefinierte Stile des Autors".

html, body {
    height: 100%;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    color: #666;
}
/* button */
.button {
    cursor: pointer;
    text-decoration: none;
    font-size: 0.6em;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 6px;
    margin: 0 10px;
    position: relative;
    background: #ccc;
    color: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    background: rgb(190,190,190); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(190,190,190,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,190,190,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */
}
.button:hover {
    background: #637b85;
}
/* Header styles */
header {
    text-align: center;
    background: #637b85;
    color: #fff;
    margin-bottom: 40px;
}
header span {
    font-weight: 200;
}
header .button {
    font-size: 0.2em;
    top: -6px;
}

/* various containers */
.container {
    width: 200px;
    margin: 0 auto;
}
.canvas-container {
    min-height: 300px;
    max-height: 600px;
    position: relative;
}
.widget {
    position: relative;
    margin-bottom: 80px;
    background: #efefef;
    padding: 12px;
    margin-bottom: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Hier definieren wir das erforderliche CSS für die Sticky-Fußzeile sowie eine Schaltflächenklasse, eine selbstzentrierende Containerklasse, eine Klasse zum Enthalten unserer Canvas-Elemente in unseren Widgets und unsere Widgets selbst. Wir müssen auch die Google-Schriftart hinzufügen, die wir für den Körper definieren, indem wir diese in unser Head-Tag aufnehmen.

1	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>

Das Donut-Diagramm

Donut-Diagramme sind Kreisdiagrammen sehr ähnlich, außer dass sie einen Teil des mittleren Ausschnitts haben. Standardmäßig definiert ChartJS, dass 50% der Fläche des Diagramms weggelassen werden sollen. Wir werden bei dieser Standardeinstellung bleiben. Der Code zum Erstellen des Donut-Diagramms ist unten dargestellt.

var data = [
    {
        value: 20,
        color:"#637b85"
    },
    {
        value : 30,
        color : "#2c9c69"
    },
    {
        value : 40,
        color : "#dbba34"
    },
    {
        value : 10,
        color : "#c62f29"
    }

];
var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Doughnut(data);

Hier sehen Sie, dass wir die Daten und Farben unseres Donut-Diagramms definiert haben. Dies ist alles, was benötigt wird, damit das Donut-Diagramm funktioniert. Was repräsentieren die einzelnen Abschnitte? Leider hat ChartJS noch keine einfache Möglichkeit, Beschriftungen für das Donut-Diagramm zu definieren. Wir können jedoch eine eigene Legende erstellen, um die verschiedenen Abschnitte zu beschreiben. Ändern Sie das HTML des Donut-Widgets so, dass es Folgendes enthält.

<div class="third widget doughnut">
    <h3>Breakdown of Hours</h3>
    <p><a href="" class="button">Filter By Employee</a></p>
    <div class="canvas-container">
        <canvas id="hours"></canvas>
        <span class="status"></span>
    </div>
    <div class="chart-legend">
        <ul>
            <li class="ship">Shipping &amp; Receiving</li>
            <li class="rework">Rework</li>
            <li class="admin">Administrative</li>
            <li class="prod">Production</li>
        </ul>
    </div>
</div>

Wir verwenden diese Li's von ihren Klassen sehr einfach im CSS, indem wir die Pseudoklasse `:before` nutzen.

.chart-legend ul {
    list-style: none;
    width: 100%;
    margin: 30px auto 0;
}
.chart-legend li {
    text-indent: 16px;
    line-height: 24px;
    position: relative;
    font-weight: 200;
    display: block;
    float: left;
    width: 50%;
    font-size: 0.8em;
}
.chart-legend  li:before {
    display: block;
    width: 10px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
}
.ship:before { background-color: #637b85; }
.rework:before { background-color: #2c9c69; }
.admin:before { background-color: #dbba34; }
.prod:before { background-color: #c62f29; }

Als nächstes wollen wir einen schönen "thumbs-up" in der Mitte des Donuts haben. Dies beinhaltet einige CSS-Tricks, einschließlich einer Version von Onkel Daves Ol' Padded Box, damit der Kreis reagiert. Wir werden die Spanne mit der Klasse .status verwenden, um diesen Kreis zu erreichen. Fügen Sie main.css die folgenden Regeln hinzu:

.widget.doughnut .status {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 0;
    padding-top: 12%;
    padding-bottom: 18%;
    color: #444;
    margin-top: -15%;
    margin-left: -15%;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    background-color: #aaa;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
}

Das vielleicht auffälligste Element, das hier auffällt, ist die Verwendung des Daten-URI für das Hintergrundbild. Dies ermöglicht es uns, eine zusätzliche HTTP-Anfrage zu vermeiden und ist syntaktisch gleichbedeutend mit der Verwendung einer tatsächlichen http-URL. Wir setzen dieses Element auch so, dass es absolut innerhalb seines .widget-Elements positioniert ist, das wir zuvor als positionsrelativ festgelegt haben.

Lassen Sie uns nun die Widget-Typografie einrichten. Wir verwenden nur h3- und p-Elemente im Widget. hier ist das begleitende css.

.widget p {
    margin-top: 0;
    text-align: center;
}
.widget h3 {
    margin: -12px 0 12px -12px;
    padding: 12px;
    width: 100%;
    text-align: center;
    color: #627b86;
    line-height: 2em;
    background: #d0dde3;
}

Die Rand- und Auffüllregeln für das h3-Element ermöglichen es dem Element, sich bis zum Rand des Widget-Elements über den 12-Pixel-Abstand des Widgets zu erstrecken. Wir setzen auch den oberen Rand des p-Elements auf 0, um näher an die Kopfzeile des Widgets zu passen.

Das Liniendiagramm

Eine der nützlichsten Funktionen von ChartJS ist, dass einige der Diagramme mehrere Datensätze zulassen. Diese Datensätze werden nacheinander in dasselbe Diagramm gezeichnet, sodass ein Datensatz mit einem anderen verglichen werden kann. Ein perfektes Beispiel dafür sind Liniendiagramme. Wir werden zwei Datensätze verwenden, um diese Funktionalität zu untersuchen.

var data = {
    labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
    datasets : [
        {
            fillColor : "rgba(99,123,133,0.4)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,54,30,81,56,55,40]
        },
        {
            fillColor : "rgba(219,186,52,0.4)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [20,60,42,58,31,21,50]
        },
    ]
}
var canvas = document.getElementById("shipments");
var ctx = canvas.getContext("2d");
new Chart(ctx).Line(data, options);

Ein paar Dinge, die in diesem neuen Code zu beachten sind: Zuerst verwenden wir die Variablen wieder, die wir zum Erstellen des Donut-Diagramms verwendet haben. Dies ist in JavaScript vollständig gültig und reduziert den vom Skript insgesamt verwendeten Speicher geringfügig. Dies kann jedoch in Zukunft zu Verwirrung führen. Wenn Sie diesen Code für die Verwendung in der Produktion anpassen möchten, ist es möglicherweise effektiver, für jedes neu erstellte Diagramm neue Variablen zu verwenden.

Als nächstes unterstützt das Liniendiagramm Beschriftungen. Dies ist wichtig, da wir so vermeiden können, HTML-basierte Legenden zu erstellen. Es ist jedoch auch wichtig, dass die Datenpunkte mit den angegebenen Beschriftungen übereinstimmen. In diesem Beispiel stimmt unser erster Datenpunkt im ersten Datensatz, 65, mit "Mon" in den Beschriftungen überein.

Schließlich sind unsere fillColors für diese Datensätze RGBa-Versionen der zuvor definierten Farben (dunkelblau und gelb). Wir haben die RGB-Werte durch Eingabe der Farben in den Farbwähler von Photoshop ermittelt. Dies kann jedoch mit einer Reihe von Farbauswahlwerkzeugen erfolgen.

Wir werden auch Markups für einige Schaltflächen und einen für Menschen lesbaren Bereich hinzufügen. Das HTML für die letzte Zeile sieht wie folgt aus.

<div class="third widget line">
    <div class="chart-legend">
        <h3>Shipments per Day</h3>
        <p><span>This Week</span> &mdash; <strong>Last Week</strong></p>
        <p><a href="" class="button">Change Date Range</a><a href="" class="button">Filter by Location</a></p>
    </div>
    <div class="canvas-container">
        <canvas id="shipments"></canvas>
    </div>
</div>

Wir können den zusätzlichen HTML-Code verbessern und den Benutzern helfen, die Daten mit dem folgenden CSS zu verbinden:

.widget.line p span {
    color: #dbba34;
}
.widget.line p strong {
    color: #637b85;
    font-weight: 400;
}

Radardiagramm

Radardiagramme sind nützlich, um eine Auswahl von Variablen in ein einzeln lesbares Diagramm zu destillieren, um eine allgemeine Wahrnehmung des Zusammenspiels zwischen den verschiedenen Variablen zu erhalten. In unserem Beispiel untersuchen wir beispielsweise die Idee des Kundendienstes anhand der Häufigkeit, mit der bestimmte Schlüsselwörter erwähnt werden. In einem Radardiagramm bilden die gezeichneten Punkte eine Form. Diese Form kann uns ein allgemeines Gefühl für die Effektivität des Kundenservice geben.

Mal sehen, wie das entsteht! Wir werden unsere Variablen noch einmal von früher wiederverwenden.

var data = {
    labels : ["Helpful","Friendly","Kind","Rude","Slow","Frustrating"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "#637b85",
            pointColor : "#dbba34",
            pointStrokeColor : "#637b85",
            data : [65,59,90,81,30,56]
        }
    ]
}
var canvas = document.getElementById("departments");
var ctx = canvas.getContext("2d");
new Chart(ctx).Radar(data, options);

Der zugehörige HTML-Code sieht folgendermaßen aus:

<div class="third widget">
    <div class="chart-legend">
        <h3>Customer Service Assessment</h3>
        <p>based on words mentioned</p>
        <p><a href="" class="button">Track another word</a></p>
    </div>
    <div class="canvas-container">
        <canvas id="departments"></canvas>
    </div>
</div>

Intuitiv können wir verstehen, dass eine Form, die weiter oben und rechts ist, besser ist als eine Form, die weiter unten und links ist. Wir verlieren jedoch nicht die spezifischen Daten, die uns innerhalb des Diagramms auf einer granularen Ebene mit einer einzelnen Variablen zur Verfügung stehen. In diesem Fall wird das Wort "unhöflich" häufig erwähnt, aber der allgemeine Sinn für Kundenservice scheint aufgrund anderer Schlüsselwörter positiv zu sein.

Alles reaktionsschnell machen

Wir haben unsere Canvas-Elemente bereits so eingerichtet, dass sie mit dem JavaScript reagieren, mit dem wir auf die Größenänderung von Fenstern reagiert haben. Jetzt müssen wir unser CSS mithilfe von Medienabfragen reaktionsfähig machen. Hier ist das CSS, mit dem wir dies tun werden.

@media only screen and (min-width:300px){
    .container {
        width: 300px;
        margin: 0 auto;
    }
}

@media only screen and (min-width:600px){
    .container {
        width: 580px;
        margin: 0 auto;
    }
    .third {
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }
    .third:first-child {
        margin-left: 0;
    }
    .third:last-child {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (min-width:960px){
    .container {
        width: 940px;
    }
    .third {
        float: left;
        width: 30%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .third:first-child {
        margin-left: 0;
    }
    .third:last-child {
        margin-right: 0;
        margin-left: 2.5%;
        width: 30%;
    }
}
@media only screen and (min-width:1140px){
    .container {
        width: 1120px;
    }
}
@media only screen and (min-width:1360px){
    .container {
        width: 1300px;
    }
}

Das Erste, was Sie an diesem CSS bemerken sollten, ist, dass alle Medienabfragen nur auf der Mindestbreite basieren. Dies bedeutet, dass wir von den Bildschirmen mit der geringsten Breite aus entwerfen und neue Regeln hinzufügen, wenn wir nach oben gehen. Unser Design erfordert nicht viele Änderungen an jedem Haltepunkt, aber dieses Muster ist eine bewährte Methode für Designs aller Maßstäbe.

Wir können einige grundlegende Layoutänderungen an jedem Haltepunkt sehen, einschließlich der Breite des primären Containerelements sowie unserer Behandlung der .third Klasse, die wir für jedes der Widgets verwenden. Unter 400 stapeln wir alle Widgets übereinander. Zwischen 400 und 600 machen wir die ersten beiden Spalten mit half-width und das dritte Widget (das Radardiagramm) mit full-width. Schließlich verwenden wir über 960 drei Spalten inline.

Abschluss

Dieses Tutorial führt Sie durch die grundlegenden Schritte zum Erstellen eines Dashboards mit ChartJS. Die hier beschriebenen grundlegenden Konzepte sollen Ihnen helfen, mit ChartJS komplexere Projekte zu erstellen, und Sie dazu ermutigen, über Responsive Design aus der Perspektive von Bottom-up nachzudenken.

Welche Erfahrungen haben Sie mit Diagrammbibliotheken gemacht? Verwenden Sie SVG oder Canvas zum Zeichnen von Daten? Was wünscht du dir, würde ChartJS tun, was es nicht tut? Fügen Sie Ihre Kommentare unten hinzu!