WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 348

series: [{
type: 'line',
axis: 'right',
xField: 'date',
yField: 'tempMaxC',
style: {
stroke: '#f40',
'stroke-width': 10,
opacity: 1
},
},{
type: 'line',
xis: 'right',
xField: 'date',
yField: 'tempMinC',
style: {
stroke: '#04c',
'stroke-width': 10,
opacity: 1
},
}]
Im Fall der Wetterstation benötigen Sie zwei Serien: eine für die Maximal- und eine
für die Minimaltemperatur. Serien erwarten dabei mehrere Parameter:
type : Definiert die Art der Serie - der Wert »line« rendert eine Kurve.
axis : Gibt an, an welcher Achse sich die Kurve orientiert.
xField : Steht für den Schlüssel auf der X-Achse, also das Datum.
yField : Steht für den Wert, also die Maximal- bzw. Minimaltemperatur.
Zusätzlich können Sie mit style die Farbe und Strichstärke der Kurve festlegen.
Natürlich wollen Sie die wärmsten Werte in Rot und die kältesten in Blau darstellen.
Auf Ihrem Smartphone sieht das Ganze dann in etwa so aus wie in Abbildung 8.29.
Zumindest theoretisch. Wenn Sie Ihre App aktuell auf dem iPhone öffnen, sehen Sie
- richtig, nichts. Dazu müssen Sie das Chart noch zu einem Ext.Panel hinzufügen,
ohne die in Sencha Touch ja bekanntlich nichts geht:
new Ext.chart.Panel({
fullscreen: true,
items: chart,
// Hier kommt die Kopfzeile hin
});