HTML and CSS Reference
In-Depth Information
Legen Sie ein neues Objekt vom Typ
Ext.chart.Chart
an. Dieses erwartet mindestens
drei Parameter: Der
store
ist die Datengrundlage - Ihr Diagramm ist zunächst leer,
also
null
, es bekommt seine Daten ja in der Funktion
wetterAnzeigen()
übergeben.
Auf die anderen beiden Parameter, die Diagrammachsen (
axes
) und die Kurven
(
series
) werden wir nun etwas genauer eingehen.
Die Diagrammachsen
Besonders komplexe Diagramme können locker bis zu vier verschiedene Achsen
besitzen, um unterschiedliche Dimensionen von Daten auf einmal darzustellen. Ihre
Wetterstation soll auf der X-Achse die nächsten Tage anzeigen, auf der Y-Achse die
Temperaturen. Fügen Sie Folgendes in das
Ext.chart.Chart
ein:
8
axes: [{
type: 'Numeric',
position: 'right',
decimals: 0,
adjustMinimumByMajorUnit: true,
adjustMaximumByMajorUnit: true,
fields: ['tempMaxC','tempMinC']
}, {
type: 'Category',
position: 'bottom',
fields: ['date']
}],
Es handelt sich hierbei um ein Array mit zwei Unterobjekten: Das erste stellt die Y-
Achse, also die Temperaturen, dar. Zunächst legen Sie mit
type
die Art der Achse fest,
position: right
besagt, dass diese auf der rechten Seite des Diagramms angezeigt
wird. Um merkwürdige Rundungsfehler zu vermeiden, legen Sie mit
decimals: 0
fest,
dass keine Nachkommastellen angezeigt werden. Da es je nach Ort mal sehr kalt oder
sehr warm sein kann, sorgen die Parameter
adjustMinimumByMajorUnit
und
adjust-
MaximumByMajorUnit
dafür, dass Temperaturen immer vernünftig auf dem Diagramm
verteilt werden. Der
fields
-Parameter legt schließlich fest, welche Daten auf der Y-
Achse angezeigt werden sollen.
Die zweite Achse ist etwas einfacher: Sie wird unter dem Diagramm angezeigt und
stellt die Datumsangaben dar.
Diagrammdaten oder auch Serien
Serien
definieren die eigentlichen Kurven des Diagramms. Genau wie bei den Achsen
handelt es sich dabei um ein Array mehrerer Objekte. Sie können hier beliebig viele
Objekte eingeben:
Search WWH ::
Custom Search