Element: Bar Chart

Mit diesem Element können Balkendiagramme erstellt werden. Die Werte für das Diagramm können im contentDock® Management System manuell gesetzt oder mit DatenContainer-Tabellen verbunden werden. Das Bar Chart Element besteht aus den Sub-Elementen X-Achse, Y-Achse und der Diagramm-Legende. Alle diese Sub-Elemente nutzen eigene Styles für die Darstellung.

Beispiel App

Sie können dieses Element mit Beispiel-Styles direkt im öffentlichen Bereich der contentDock® Viewer App testen. Zusätzlich können Sie diese Beispiel-Styles auch aus der Vorlagen-Bibliothek in Ihren Benutzer-Account laden und in Ihr App-Projekt importieren.

Styles

  • Hintergrund
    Farbe
    Contentdock color help
    Definiert die Farbe für den Hintergrund des Elements. Die Farbe wird in der kompletten Größe des Elements verwendet. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Bild
    Contentdock background image help
    Definiert das Hintergrundbild für das Element. Das Bild wird skaliert im Element dargestellt.
  • Rahmen
    Höhe
    Contentdock bar chart border height help
    Definiert die Stärke des Rahmens in Pixel, der das Element umschließt. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Radius
    Contentdock bar chart border radius help
    Definiert den Radius des Rahmens in Pixel, der in den Element-Ecken verwendet wird. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Definiert die Farbe für den Rahmen des Elements. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Position
    Contentdock bar chart border position help
    Hiermit geben Sie die Position des Rahmens an. Der Rahmen umschließt immer das Element, allerdings können Sie wählen in welche Richtung der Rahmen gezeichnet wird.

    Mögliche Werte sind:

    Innen: Der Rahmen wird nach innen gezeichnet.

    Außen: Der Rahmen wird nach außen gezeichnet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    inner

  • Diagramm
    Darstellung
    Contentdock bar chart visual options help
    Definiert die grundsätzliche Darstellung des Balken-Diagramms.

    Mögliche Werte sind:

    Vertikal: Die Balken werden vertikal dargestellt.

    Horizontal: Die Balken werden horizontal dargestellt.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    vertical

  • Diagrammbalken
    Rahmenhöhe der Diagrammbalken
    Contentdock bar chart border bar height help
    Definiert die Stärke des Rahmens in Pixel, der den Diagramm-Balken umschließt.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Rahmenfarbe der Diagrammbalken
    Contentdock color help
    Definiert die Farbe für den Rahmen des Diagramm-Balkens. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Rahmenradius des Diagrammbalkens
    Abstand zwischen den Balken
    Offset für die Balkendarstellung
    Animationsgeschwindigkeit in Millisekunden der Balken
    Verzögerungszeit in Millisekunden bevor die Animation startet
  • Titel im Diagrammbalken
    Anzeigen Titel im Balken
    Contentdock bar chart title in bar help
    Ist dieser Style aktiviert, werden die X-/Y- Achsen-Beschriftungen im Balken angezeigt.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Horizontale Ausrichtung des Titels im Balken
    Contentdock bar chart title horizontal alignment help
    Nur wenn die Diagramm-Darstellung "horizontal" ist.

    Ausrichtung der Y- Achsen-Beschriftung im Balken.

    Mögliche Werte sind:

    links: Der Text wird links ausgerichtet.

    rechts: Der Text wird rechts ausgerichtet.

    zentriert: Der Text wird horizontal zentriert ausgerichtet.
    Vertikale Ausrichtung des Titels im Balken
    Contentdock bar chart title vertical alignment help
    Nur wenn die Diagramm-Darstellung "vertikal" ist.

    Ausrichtung der X- Achsen-Beschriftung im Balken.

    Mögliche Werte sind:

    oben: Der Text wird von oben nach unten ausgerichtet.

    unten: Der Text wird von unten nach oben ausgerichtet.

    mitte: Der Text wird vertikal zentriert ausgerichtet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    bottom

    Abstand von links zum Titel im Balken
    Contentdock bar chart title distance left help
    Definiert den Abstand von links zum Text im Diagramm-Balken.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    5

    Abstand von rechts zum Titel im Balken
    Contentdock bar chart title distance right help
    Nur wenn die Diagramm-Darstellung "horizontal" ist.

    Definiert den Abstand von rechts zum Text im Diagramm-Balken.
    Abstand von oben zum Titel im Balken
    Contentdock bar chart title distance top help
    Definiert den Abstand von oben zum Text im Diagramm-Balken.
    Abstand von unten zum Titel im Balken
    Contentdock bar chart title distance bottom help
    Nur wenn die Diagramm-Darstellung "vertikal" ist.

    Definiert den Abstand von unten zum Text im Diagramm-Balken.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    5

    Schriftart
    Contentdock font family help
    Definiert die Schriftart für den Text im Diagramm-Balken.

    In contentDock® sind diverse Schriften von fonts.google.com bereits installiert. Sie können aber auch ihre eigenen Schriften in contentDock® als TTF (TrueType Font) oder OTF (OpenType Font) laden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    Open Sans Light

    Schriftgröße
    Contentdock font size help
    Definiert die Größe des Textes im Diagramm-Balken. Der Wert wird aus einem Dropdown ausgewählt oder kann individuell gesetzt werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    10

    Farbe
    Contentdock color help
    Definiert die Farbe für den Text im Diagramm-Balken. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    #ffffff

  • Wert nach dem Diagrammbalken
    Anzeigen Wert nach dem Balken
    Contentdock bar chart value after the bar help
    Ist dieser Style aktiviert, wird der Wert rechts neben dem Diagramm-Balken dargestellt.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Abstand zwischen Balken und Wert
    Contentdock bar chart distance bar value help
    Definiert den Abstand zwischen dem Balken und dem Wert-Text.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    5

    Schriftart
    Contentdock font family help
    Definiert die Schriftart für den Werte-Text rechts vom Diagramm-Balken.

    In contentDock® sind diverse Schriften von fonts.google.com bereits installiert. Sie können aber auch ihre eigenen Schriften in contentDock® als TTF (TrueType Font) oder OTF (OpenType Font) laden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    Open Sans Light

    Schriftgröße
    Contentdock font size help
    Definiert die Größe des Werte-Textes rechts vom Diagramm-Balken. Der Wert wird aus einem Dropdown ausgewählt oder kann individuell gesetzt werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    14

    Benutze Diagramm-Wertfarbe für Titel
    Contentdock bar chart value color after bar help
    Ist dieser Style aktiviert, wird für den Wert die definierte Farbe verwendet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Wird nur verwendet, wenn der Style "Benutze Diagramm-Wertfarbe für Titel" nicht aktiviert ist.

    Definiert die Farbe für den Werte-Text rechts vom Diagramm-Balken. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    #000000

Info layer chart value point (sub element)

  • Hintergrund
    Farbe
    Contentdock color help
    Definiert die Farbe für den Hintergrund des Layers. Die Farbe wird in der kompletten Größe des Layers verwendet. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(0,0,0,0.4)

    Bild
    Contentdock background image help
    Definiert das Hintergrundbild für den Layer. Das Bild wird skaliert im Layer dargestellt.
  • Rahmen
    Höhe
    Contentdock chart info layer border height help
    Definiert die Stärke des Rahmens in Pixel, der den Layer umschließt. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    4

    Radius
    Contentdock chart info layer border radius help
    Definiert den Radius des Rahmens in Pixel, der in den Layer-Ecken verwendet wird. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    5

    Farbe
    Contentdock color help
    Definiert die Farbe für den Rahmen des Layers. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(0,0,0,0.8)

    Position
    Contentdock chart info layer border position help
    Hiermit geben Sie die Position des Rahmens an. Der Rahmen umschließt immer den Layer, allerdings können Sie wählen in welche Richtung der Rahmen gezeichnet wird.

    Mögliche Werte sind:

    Innen: Der Rahmen wird nach innen gezeichnet.

    Außen: Der Rahmen wird nach außen gezeichnet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    outer

  • Innerer Abstand
    Nach oben
    Contentdock chart info layer padding top help
    Definiert den Abstand zwischen dem oberen Rand des "Layers" und dem Text.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    10

    Nach unten
    Contentdock chart info layer padding bottom help
    Definiert den Abstand zwischen dem unteren Rand des "Layers" und dem Text.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    10

    Nach links
    Contentdock chart info layer padding left help
    Definiert den Abstand zwischen dem linken Rand des "Layers" und dem Text.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    10

    Nach rechts
    Contentdock chart info layer padding right help
    Definiert den Abstand zwischen dem rechten Rand des "Layers" und dem Text.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    10

  • Titel Schrift
    Schriftart
    Contentdock font family help
    Definiert die Schriftart für den Titel-Text im Layer.

    In contentDock® sind diverse Schriften von fonts.google.com bereits installiert. Sie können aber auch ihre eigenen Schriften in contentDock® als TTF (TrueType Font) oder OTF (OpenType Font) laden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    Open Sans Light

    Schriftgröße
    Contentdock font size help
    Definiert die Größe des Titel-Textes im Layer. Der Wert wird aus einem Dropdown ausgewählt oder kann individuell gesetzt werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    14

    Benutze Diagramm-Wertfarbe für Titel
    Contentdock chart info layer use chart color title help
    Ist dieser Style aktiviert, wird für den Titel-Text die definierte Farbe aus dem Diagramm-Item verwendet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Wird nur verwendet, wenn der Style "Benutze Diagramm-Wertfarbe für Titel" nicht aktiviert ist.
    Definiert die Farbe für den Titel-Text im Layer.

    Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    #ffffff

  • Ausrichtung
    Ausrichtung
    Contentdock text align help
    Definiert die grundsätzliche Ausrichtung des Textes innerhalb des Layers.

    Mögliche Werte sind:

    links: Der Text ist links ausrichtet.

    rechts: Der Text ist nach rechts ausgerichtet.

    zentriert: Der Text ist im Layer zentriert.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    center

  • Diagrammwert Schrift
    Schriftart
    Contentdock font family help
    Definiert die Schriftart für den Werte-Text im Layer.

    In contentDock® sind diverse Schriften von fonts.google.com bereits installiert. Sie können aber auch ihre eigenen Schriften in contentDock® als TTF (TrueType Font) oder OTF (OpenType Font) laden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    Open Sans Light

    Schriftgröße
    Contentdock font size help
    Definiert die Größe des Werte-Textes im Layer. Der Wert wird aus einem Dropdown ausgewählt oder kann individuell gesetzt werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    70

    Benutze Diagramm-Wertfarbe für Titel
    Contentdock chart info layer use chart color value help
    Ist dieser Style aktiviert, wird für den Werte-Text die definierte Farbe aus dem Diagramm-Item verwendet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Wird nur verwendet, wenn der Style "Benutze Diagramm-Wertfarbe für Titel" nicht aktiviert ist.
    Definiert die Farbe für den Werte-Text im Layer.

    Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    #ffffff

  • Layer-Verhalten
    Abstand zwischen Titel und Wert

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    10