Open Thema mit Navigation

Attribute für Chart-Widgets

Chart-Widgets verwenden die Highcharts-Bibliothek. Alle Attribute sind JSON-Objekte.

Folgende Attribute können gesetzt werden:

• Allgemeine Attribute wie die Sichtbarkeit.
• Die grundlegenden Konfigurationsoptionen der Highcharts-Bibliothek. Die Werte ...
  • können in den Attributen der Seitenanpassung gesetzt werden.
  • können im mit dem Chart-Widget verknüpften Admin-Tool-Skript gesetzt werden (siehe Abschnitt oben). Die Attribute müssen als HashMap zurückgegeben werden.
  • können leer gelassen werden.

Abbildung 177: Highcharts-Konfigurationsoptionen

Allgemeine Attribute:

• localization

  Lokalisierte Werte d. h. "de: {subject:'Thema', yes:'Ja'}, en: {subject:'Subject', yes:'Yes'}"

  Das Attribut localization kann die lokalisierten Werte für alle im Widget-Skript verwendeten String-Attribute liefern.

  Wenn Sie (wie in der folgenden Abbildung gezeigt) Werte für die Attribute title und footer brauchen, können Sie drei Attribute setzen:

  • Attribut: title, Wert _('titlestring')

  • Attribut footer, Wert _('footerstring')

  • Attribut localization liefert die lokalisierten Werte für beide Attribute. Wert de:{titlestring:'Offene Tickets: ',footerstring:'Anzahl bearbeitbare Tickets'}, en:{titlestring:'Open tickets: ', footerstring:'Number of accessible tickets'}

    Sie können die Werte für die Attribute im Admin-Tool-Skript setzen, wie im folgenden Skript für die drei Strings all, own und unassigned gezeigt.

    

    Abbildung 178: Lokalisieren von Attributen der Seitenanpassung in einem Admin-Tool-Skript

    Es macht keinen Unterschied, ob Sie die Werte für die Attribute in einem Skript angeben oder auf der graphischen Benutzeroberfläche der Seitenanpassung. Sie können Werte auch folgendermaßen lokalisieren (Beispiel eines KPI-Widgets):

    

    Abbildung 179: Lokalisieren von String-Attributen der Seitenanpassung über die graphische Benutzeroberfläche

• visible

  Definiert, ob das Widget angezeigt wird, true oder false.

Highchart-spezifische Attribute:

• chart
  Optionen, die den Chart-Bereich und den Plot-Bereich betreffen, sowie allgemeine Chart-Optionen (http://api.highcharts.com/highcharts#chart). Beispiel:

  chart = "type:'column', pltShadow:false, backgroundColor:'#4dc245', height:

  300";"items: [{html:'sometext', style: { left: '100px'; }}]"

  Code-Beispiel 6: Chart-Objekt

• colors
  Ein Array, das die Standardfarben für die Datenreihen des Charts enthält. Wenn alle Farben verwendet wurden, werden benötigte neue Farben wieder vom Anfang genommen. Standardwerte: http://api.highcharts.com/highcharts#colors.
• credits
  Standardmäßig setzt Highchart in der unteren rechten Ecke des Charts ein Credits-Label. Das kann mit folgenden Optionen geändert werden: http://api.highcharts.com/highcharts#credits.
• drilldown
  Optionen für Drill-Down, dem Konzept zum Einsehen von immer höher aufgelösten Daten durch Klicken auf die Chart-Elemente wie Balken oder Tortenstücke (http://api.highcharts.com/highcharts#drilldown).
• exporting
  Optionen für das Exportmodul (http://api.highcharts.com/highcharts#exporting).
• global
  Globale Optionen, die nicht für jedes Chart gelten (http://api.highcharts.com/highcharts#global). Es kann nur für einen Typ gesetzt werden, d. h. für chartWidget oder tableWidget, nicht aber für Bereiche oder einzelne Widgets!
• labels
  HTML-Label, die an einer beliebigen Stelle des Chart-Bereichs positioniert werden können (http://api.highcharts.com/highcharts#labels).

  labels = "items: [{html:'sometext', style: { left: '100px'; }}]"

  Code-Beispiel 7: Label-Objekt

• lang
  Sprachobjekt. Das Sprachobjekt ist global und kann nicht für jedes Chart einzeln gesetzt werden (http://api.highcharts.com/highcharts#lang). Es kann nur für einen Typ gesetzt werden, d. h. für chartWidget oder tableWidget, nicht aber für Bereiche oder einzelne Widgets!
• legend
  Die Legende ist ein Feld, das für jedes Element der Datenreihe oder des Punktes im Chart ein Symbol und einen Namen enthält (http://api.highcharts.com/highcharts#legend).
• loading
  Die Ladeoptionen steuern das Aussehen der Ladeseite, die den Plot-Bereich während Chart-Operationen bedeckt (http://api.highcharts.com/highcharts#loading).
• localization
  Lokalisierte Werte d. h. "de: {subject:'Thema', yes:'Ja'}, en: {subject:'Subject', yes:'Yes'}".
• navigation
  Eine Sammlung von Optionen für die Buttons und Menüs im Exportmodul (http://api.highcharts.com/highcharts#navigation).
• noData
  Optionen für die Anzeige einer Meldung wie "Keine Daten verfügbar" (http://api.highcharts.com/highcharts#noData).
• pane
  Gilt für Netzdiagramme und Tachos. Diese Konfigurationsobjekte enthalten allgemeine Optionen für die kombinierten X- und Y-Achsen (http://api.highcharts.com/highcharts#pane).
• plotOptions
  Die Plot-Optionen sind ein Wrapper-Objekt für die Konfigurationsobjekte für jeden Datenreihentyp (http://api.highcharts.com/highcharts#plotOptions).
• series
  Die Datenreihe, die an das Chart angehängt wird (http://api.highcharts.com/highcharts#series).
• subtitle
  Der Untertitel des Charts (http://api.highcharts.com/highcharts#subtitle).
• title
  Der Titel des Charts (http://api.highcharts.com/highcharts#title).
• tooltip
  Optionen für den Tooltip, der erscheint, wenn der Benutzer mit der Maus über eine Datenreihe oder einen Punkt fährt (http://api.highcharts.com/highcharts#tooltip).
• visible
  Gibt an, ob das Widget angezeigt werden soll.
• xAxis
  Die X-Achse oder die Kategorie-Achse (http://api.highcharts.com/highcharts#xAxis) .
• yAxis
  Die Y-Achse oder die Werte-Achse (http://api.highcharts.com/highcharts#yAxis) .

Beispiel für ein Chart-Widget

Das folgende Beispiel zeigt das Widget TicketsInView und erklärt die Logik des verknüpften Admin-Tool-Skripts ticketsInViewDataWidget.groovy. Das komplette Skript finden Sie im Codeblock weiter oben. Hier werden die einzelnen Codezeilen mit den GUI-Elementen, die sie konfigurieren, in Verbindung gebracht.

Abbildung 180: Beispiel für ein Chart-Widget mit Skriptcode