Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.3 - Diagramm Eigenschaften

Teil 1.3 - Diagramm Eigenschaften

Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch

Hier einige Diagramm Elemente und Eigenschaften erklärt:

- categoryAxesSettings (X-Achse, Zeitachse)

categoryAxesSettings gelten für alle Panels.

categoryAxesSettings:
{

//kleinste angezeigte Periode ("mm" für Minuten "DD" für Tage)
minPeriod: "mm",

//maximal angezeigte Datenpunkte bevor gruppiert wird
maxSeries: 1000,

//oder z.B Schriftgrösse etc.
fontSize: 8
},

Die Zeitachse lässt sich für einzelne Panels auch ausblenden:

title: "Pressure",
showCategoryAxis: false,
percentHeight: 50,
...

- valueAxes

valueAxes benötigten wir bereits im Teil 1.2, um eine zweite Achse hinzuzufügen. Wir können damit aber auch umfangreich formatieren:

valueAxes:
[
{

 //id um diese achse dem betreffenden graph zuweisen zu können
 id: "p2va2",

 // dann beliebige Elemente
 color:"#1CB30B",
 position: "right"
}
],

(Im graph zuweisen nicht vergessen:)

valueAxis: "p2va2",

Mit "maximum" und "minimum" kann man den immer sichtbaren Bereich festlegen. Ansonsten würde sich der Bereich an die Werte anpassen. (z.B für Windrichtungen 0-360°)

valueAxes:
[
{
 id: "p3va2",
 color:"#1CB30B",
 position: "right"
 maximum: 360,
 minimum: 0
}
],

- guides

Innerhalb von valueAxes (siehe oben) lassen sich mit "guides" auch Linien ausgeben. (z.B für Grenzwerte)

valueAxes:
[
{
 id: "p4va1",
 color:"#1CB30B",
 position: "right",

 guides:
 [
 {
  value: 10,
  label: "Grenzwert"
 }
 }

}
],

- stockLegend

Mit "stockLegend" lässt sich für jedes Panel einzeln die Legende ändern:

stockLegend: 
{

 // Ausgabe  (z.B: 12 km/h)
 valueTextRegular: "[[VALUE]]km/h",

 //Das Symbol
 markerType: "circle"



}

- panelSettings

panelSettings gelten für alle Panels:

panelsSettings: 
{

 // Prefixes würden Werte über 1000 mit 1K abkürzen.
 usePrefixes: false,

 // Zahlenformat ändern auf 1.000,0
 numberFormatter: {precision:-1, decimalSeparator:',', thousandsSeparator:'.'}

 // Zahlenformat ändern auf 1'000.0
 numberFormatter: {precision:-1, decimalSeparator:'.', thousandsSeparator:'\''}
}

- valueAxesSettings (Y-Achse)

valueAxesSettings gelten für alle Panels und Graphen:

valueAxesSettings:{

 // Schriftgrösse
 fontSize: 9,

 //Schriftfarbe
 color:"#cccccc"

},