Diagramme in adaptiven Karten

Sie können Daten mithilfe von Diagrammen in adaptiven Karten visuell darstellen. Sie können Diagramme für Leistungsdashboards, Budgetzuordnungen, Projektmanagement, Kundeneinblicke und vieles mehr verwenden.

Ringdiagramm

Sie können das Chart.Donut -Element verwenden, um ein Ringdiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Chart.Donut",
      "data": [
        {
          "legend": "Pear",
          "value": 59
        },
        {
          "legend": "Banana",
          "value": 292
        },
        {
          "legend": "Apple",
          "value": 143
        },
        {
          "legend": "Peach",
          "value": 98
        },
        {
          "legend": "Kiwi",
          "value": 179
        },
        {
          "legend": "Grapefruit",
          "value": 50
        },
        {
          "legend": "Orange",
          "value": 212
        },
        {
          "legend": "Cantaloupe",
          "value": 68
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.Donut -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.Donut sein.
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data	✔️	Array mit Objekten	Die daten, die im Diagramm angezeigt werden sollen.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieser Elementtyp nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Element oder die Aktion.
isVisible		Boolesch	Steuert die Sichtbarkeit des Elements. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Zulässige Werte: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
legend		String	Die Legende des Diagramms.
value		Zahl	Der dem Datenpunkt zugeordnete Wert.

Messgerätdiagramm

Sie können das Chart.Gauge -Element verwenden, um ein Messgerätdiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "Basic",
      "size": "extraLarge"
    },
    {
      "type": "Chart.Gauge",
      "value": 50,
      "segments": [
        {
          "legend": "Low risk",
          "size": 33,
          "color": "good"
        },
        {
          "legend": "Medium risk",
          "size": 34,
          "color": "warning"
        },
        {
          "legend": "High risk",
          "size": 33,
          "color": "attention"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Single value",
      "size": "extraLarge",
      "spacing": "large",
      "separator": true
    },
    {
      "type": "Chart.Gauge",
      "value": 35,
      "valueFormat": "fraction",
      "segments": [
        {
          "legend": "Used",
          "size": 35
        },
        {
          "legend": "Unused",
          "size": 65,
          "color": "neutral"
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.Gauge -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.Gauge sein.
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieser Elementtyp nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
max		Zahl	Der Maximalwert des Messgeräts.
min		Zahl	Der Mindestwert des Messgeräts.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Zulässige Werte: HostCapabilities
segments		Array mit Objekten	Die Segmente, die im Messgerät angezeigt werden sollen.
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
showLegend		Boolesch	Steuert, ob die Legende angezeigt werden muss. Standardwert: true
showMinMax		Boolesch	Steuert, ob die Mindest- oder Höchstwerte angezeigt werden müssen. Standardwert: true
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
subLabel		String	Die Unterbezeichnung des Messgeräts.
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.
value		Zahl	Der Wert des Messgeräts. Standardwert: 0
valueFormat		String	Das Format, das zum Anzeigen des Messgerätwerts verwendet wird. Zulässige Werte: Percentage, Fraction Standardwert: Percentage

Dies sind die Eigenschaften des segments Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für das Segment verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
legend		String	Der Legendentext, der dem Segment zugeordnet ist.
value		Zahl	Die Größe des Segments. Standardwert: 0

Gruppiertes vertikales Balkendiagramm

Sie können das Chart.VerticalBar.Grouped -Element verwenden, um ein gruppiertes oder gestapeltes vertikales Balkendiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "Grouped",
      "size": "large",
      "separator": true,
      "spacing": "large"
    },
    {
      "type": "Chart.VerticalBar.Grouped",
      "title": "Sample",
      "xAxisTitle": "Days",
      "yAxisTitle": "Sales",
      "colorSet": "diverging",
      "data": [
        {
          "legend": "Outlook",
          "values": [
            {
              "x": "2023-05-01",
              "y": 24
            },
            {
              "x": "2023-05-02",
              "y": 27
            },
            {
              "x": "2023-05-03",
              "y": 18
            },
            {
              "x": "2023-05-04",
              "y": 30
            },
            {
              "x": "2023-05-05",
              "y": 20
            },
            {
              "x": "2023-05-06",
              "y": 35
            },
            {
              "x": "2023-05-07",
              "y": 40
            },
            {
              "x": "2023-05-08",
              "y": 45
            }
          ]
        },
        {
          "legend": "Teams",
          "values": [
            {
              "x": "2023-05-01",
              "y": 9
            },
            {
              "x": "2023-05-02",
              "y": 100
            },
            {
              "x": "2023-05-03",
              "y": 22
            },
            {
              "x": "2023-05-04",
              "y": 40
            },
            {
              "x": "2023-05-05",
              "y": 30
            },
            {
              "x": "2023-05-06",
              "y": 45
            },
            {
              "x": "2023-05-07",
              "y": 50
            },
            {
              "x": "2023-05-08",
              "y": 55
            }
          ]
        },
        {
          "legend": "Office",
          "values": [
            {
              "x": "2023-05-01",
              "y": 10
            },
            {
              "x": "2023-05-02",
              "y": 20
            },
            {
              "x": "2023-05-03",
              "y": 30
            },
            {
              "x": "2023-05-04",
              "y": 40
            },
            {
              "x": "2023-05-05",
              "y": 50
            },
            {
              "x": "2023-05-06",
              "y": 60
            },
            {
              "x": "2023-05-07",
              "y": 70
            },
            {
              "x": "2023-05-08",
              "y": 80
            }
          ]
        },
        {
          "legend": "Windows",
          "values": [
            {
              "x": "2023-05-01",
              "y": 10
            },
            {
              "x": "2023-05-02",
              "y": 20
            },
            {
              "x": "2023-05-03",
              "y": 30
            },
            {
              "x": "2023-05-04",
              "y": 40
            },
            {
              "x": "2023-05-05",
              "y": 50
            },
            {
              "x": "2023-05-06",
              "y": 60
            },
            {
              "x": "2023-05-07",
              "y": 70
            },
            {
              "x": "2023-05-08",
              "y": 80
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Stacked",
      "size": "large",
      "separator": true,
      "spacing": "large"
    },
    {
      "type": "Chart.VerticalBar.Grouped",
      "stacked": true,
      "title": "Sample",
      "xAxisTitle": "Days",
      "yAxisTitle": "Sales",
      "data": [
        {
          "legend": "Outlook",
          "values": [
            {
              "x": "2023-05-01",
              "y": 24
            },
            {
              "x": "2023-05-02",
              "y": 27
            },
            {
              "x": "2023-05-03",
              "y": 18
            },
            {
              "x": "2023-05-04",
              "y": 30
            },
            {
              "x": "2023-05-05",
              "y": 20
            },
            {
              "x": "2023-05-06",
              "y": 35
            },
            {
              "x": "2023-05-07",
              "y": 40
            },
            {
              "x": "2023-05-08",
              "y": 45
            }
          ]
        },
        {
          "legend": "Teams",
          "values": [
            {
              "x": "2023-05-01",
              "y": 9
            },
            {
              "x": "2023-05-02",
              "y": 100
            },
            {
              "x": "2023-05-03",
              "y": 22
            },
            {
              "x": "2023-05-04",
              "y": 40
            },
            {
              "x": "2023-05-05",
              "y": 30
            },
            {
              "x": "2023-05-06",
              "y": 45
            },
            {
              "x": "2023-05-07",
              "y": 50
            },
            {
              "x": "2023-05-08",
              "y": 55
            }
          ]
        },
        {
          "legend": "Office",
          "values": [
            {
              "x": "2023-05-01",
              "y": 10
            },
            {
              "x": "2023-05-02",
              "y": 20
            },
            {
              "x": "2023-05-03",
              "y": 30
            },
            {
              "x": "2023-05-04",
              "y": 40
            },
            {
              "x": "2023-05-05",
              "y": 50
            },
            {
              "x": "2023-05-06",
              "y": 60
            },
            {
              "x": "2023-05-07",
              "y": 70
            },
            {
              "x": "2023-05-08",
              "y": 80
            }
          ]
        },
        {
          "legend": "Windows",
          "values": [
            {
              "x": "2023-05-01",
              "y": 10
            },
            {
              "x": "2023-05-02",
              "y": 20
            },
            {
              "x": "2023-05-03",
              "y": 30
            },
            {
              "x": "2023-05-04",
              "y": 40
            },
            {
              "x": "2023-05-05",
              "y": 50
            },
            {
              "x": "2023-05-06",
              "y": 60
            },
            {
              "x": "2023-05-07",
              "y": 70
            },
            {
              "x": "2023-05-08",
              "y": 80
            }
          ]
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.VerticalBar.Grouped -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.VerticalBar.Grouped sein.
color		String	Die Farbe, die für alle Datenpunkte verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data		Array mit Objekten	Die Datenpunkte im Diagramm.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieses Element nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Steuert die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement oder die Eingabeaktion.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Unterstützter Wert: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
showBarValues		Boolesch	Steuert, ob die Balkenwerte angezeigt werden müssen. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.
xAxisTitle		String	Der Titel der x-Achse.
yAxisTitle		String	Der Titel der y-Achse.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
legend		String	Die Legende des Diagramms.
values		Zahl	Die Datenpunkte in der Reihe.

Dies sind die Eigenschaften von values:

Eigenschaft	Erforderlich	Typ	Beschreibung
x		String	Der x-Achsenwert des Datenpunkts.
y		Zahl	Der y-Achsenwert des Datenpunkts.

Horizontales Balkendiagramm

Sie können das Chart.HorizontalBar -Element verwenden, um ein horizontales Balkendiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "Standard with displayMode = AbsoluteWithAxis",
      "size": "large"
    },
    {
      "type": "Chart.HorizontalBar",
      "title": "Sample",
      "xAxisTitle": "Days",
      "yAxisTitle": "Sales",
      "colorSet": "diverging",
      "data": [
        {
          "x": "Pear",
          "y": 59
        },
        {
          "x": "Banana",
          "y": 292
        },
        {
          "x": "Apple",
          "y": 143
        },
        {
          "x": "Peach",
          "y": 98
        },
        {
          "x": "Kiwi",
          "y": 179
        },
        {
          "x": "Grapefruit",
          "y": 20
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Standard with displayMode = AbsoluteNoAxis",
      "size": "large",
      "spacing": "large",
      "separator": true
    },
    {
      "type": "Chart.HorizontalBar",
      "title": "Sample",
      "displayMode": "AbsoluteNoAxis",
      "data": [
        {
          "x": "Pear",
          "y": 59
        },
        {
          "x": "Banana",
          "y": 292
        },
        {
          "x": "Apple",
          "y": 143
        },
        {
          "x": "Peach",
          "y": 98
        },
        {
          "x": "Kiwi",
          "y": 179
        },
        {
          "x": "Grapefruit",
          "y": 20
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Standard with displayMode = PartToWhole",
      "size": "large",
      "spacing": "large",
      "separator": true
    },
    {
      "type": "TextBlock",
      "text": "Learning - Have you defined your goal for today's Day of learning"
    },
    {
      "type": "Chart.HorizontalBar",
      "title": "Sample",
      "displayMode": "PartToWhole",
      "color": "categoricalPurple",
      "data": [
        {
          "x": "Yes, I have defined my day of learning goal",
          "y": 15
        },
        {
          "x": "No, I haven't yet had time to do it",
          "y": 24
        },
        {
          "x": "I am not interested in learning",
          "y": 2
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.HorizontalBar -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.HorizontalBar sein.
color		String	Die Farbe, die für alle Datenpunkte verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data		Array mit Objekten	Die Datenpunkte im Diagramm.
displayMode		String	Steuert, wie das Diagramm visuell angeordnet werden muss. Zulässige Werte: AbsoluteWithAxis,AbsoluteNoAxis,PartToWhole Standardwert: AbsoluteWithAxis
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieses Element nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Steuert die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement oder die Eingabeaktion.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Unterstützter Wert: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.
xAxisTitle		String	Der Titel der x-Achse.
yAxisTitle		String	Der Titel der y-Achse.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
x		String	Der x-Achsenwert des Datenpunkts.
y		Zahl	Der y-Achsenwert des Datenpunkts.

Liniendiagramm

Sie können das Chart.Line -Element verwenden, um ein Liniendiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Chart.Line",
      "title": "Sample",
      "xAxisTitle": "Days",
      "yAxisTitle": "Sales",
      "colorSet": "categorical",
      "data": [
        {
          "legend": "Outlook",
          "values": [
            {
              "x": "2023-05-01",
              "y": 99
            },
            {
              "x": "2023-05-02",
              "y": 6
            },
            {
              "x": "2023-05-03",
              "y": 63
            },
            {
              "x": "2023-05-04",
              "y": 64
            },
            {
              "x": "2023-05-05",
              "y": 63
            },
            {
              "x": "2023-05-06",
              "y": 78
            }
          ]
        },
        {
          "legend": "Teams",
          "values": [
            {
              "x": "2023-05-01",
              "y": 12
            },
            {
              "x": "2023-05-02",
              "y": 82
            },
            {
              "x": "2023-05-03",
              "y": 12
            },
            {
              "x": "2023-05-04",
              "y": 33
            },
            {
              "x": "2023-05-05",
              "y": 1
            },
            {
              "x": "2023-05-06",
              "y": 80
            }
          ]
        },
        {
          "legend": "Office",
          "values": [
            {
              "x": "2023-05-01",
              "y": 66
            },
            {
              "x": "2023-05-02",
              "y": 93
            },
            {
              "x": "2023-05-03",
              "y": 65
            },
            {
              "x": "2023-05-04",
              "y": 13
            },
            {
              "x": "2023-05-05",
              "y": 90
            },
            {
              "x": "2023-05-06",
              "y": 48
            }
          ]
        },
        {
          "legend": "Windows",
          "values": [
            {
              "x": "2023-05-01",
              "y": 9
            },
            {
              "x": "2023-05-02",
              "y": 19
            },
            {
              "x": "2023-05-03",
              "y": 0
            },
            {
              "x": "2023-05-04",
              "y": 61
            },
            {
              "x": "2023-05-05",
              "y": 21
            },
            {
              "x": "2023-05-06",
              "y": 72
            }
          ]
        },
        {
          "legend": "Exchange",
          "values": [
            {
              "x": "2023-05-01",
              "y": 35
            },
            {
              "x": "2023-05-02",
              "y": 11
            },
            {
              "x": "2023-05-03",
              "y": 91
            },
            {
              "x": "2023-05-04",
              "y": 97
            },
            {
              "x": "2023-05-05",
              "y": 97
            },
            {
              "x": "2023-05-06",
              "y": 45
            }
          ]
        },
        {
          "legend": "SharePoint",
          "values": [
            {
              "x": "2023-05-01",
              "y": 26
            },
            {
              "x": "2023-05-02",
              "y": 99
            },
            {
              "x": "2023-05-03",
              "y": 16
            },
            {
              "x": "2023-05-04",
              "y": 26
            },
            {
              "x": "2023-05-05",
              "y": 91
            },
            {
              "x": "2023-05-06",
              "y": 22
            }
          ]
        },
        {
          "legend": "Copilot",
          "values": [
            {
              "x": "2023-05-01",
              "y": 96
            },
            {
              "x": "2023-05-02",
              "y": 37
            },
            {
              "x": "2023-05-03",
              "y": 27
            },
            {
              "x": "2023-05-04",
              "y": 5
            },
            {
              "x": "2023-05-05",
              "y": 45
            },
            {
              "x": "2023-05-06",
              "y": 59
            }
          ]
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.Line -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.Line sein.
color		String	Die Farbe, die für alle Datenpunkte verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data		Array mit Objekten	Die Datenpunkte im Diagramm.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieses Element nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Steuert die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement oder die Eingabeaktion.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Unterstützter Wert: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.
xAxisTitle		String	Der Titel der x-Achse.
yAxisTitle		String	Der Titel der y-Achse.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
legend		String	Die Legende des Diagramms.
values		Array mit Objekten	Die Datenpunkte in der Reihe.

Dies sind die Eigenschaften von values:

Eigenschaft	Erforderlich	Typ	Beschreibung
x		Eine der Zahlen oder Zeichenfolgen	Der x-Achsenwert des Datenpunkts.
y		Zahl	Der y-Achsenwert des Datenpunkts.

Kreisdiagramm

Sie können das Chart.Pie -Element verwenden, um ein Kreisdiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Chart.Pie",
      "colorSet": "categorical",
      "data": [
        {
          "legend": "Pear",
          "value": 59
        },
        {
          "legend": "Banana",
          "value": 292
        },
        {
          "legend": "Apple",
          "value": 143
        },
        {
          "legend": "Peach",
          "value": 98
        },
        {
          "legend": "Kiwi",
          "value": 179
        },
        {
          "legend": "Grapefruit",
          "value": 50
        },
        {
          "legend": "Orange",
          "value": 212
        },
        {
          "legend": "Cantaloupe",
          "value": 68
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.Pie -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.Pie sein.
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data		Array mit Objekten	Die daten, die im Diagramm angezeigt werden sollen.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieses Element nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Steuert die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement oder die Eingabeaktion.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Unterstützter Wert: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
legend		String	Die Legende des Diagramms.
value		Zahl	Der dem Datenpunkt zugeordnete Wert.

Gestapeltes horizontales Balkendiagramm

Sie können das Chart.HorizontalBar.Stacked -Element verwenden, um ein gestapeltes horizontales Balkendiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Chart.HorizontalBar.Stacked",
      "title": "Sample",
      "data": [
        {
          "title": "Outlook",
          "data": [
            {
              "legend": "2023-05-01",
              "value": 24,
              "color": "good"
            },
            {
              "legend": "2023-05-02",
              "value": 27,
              "color": "warning"
            },
            {
              "legend": "2023-05-03",
              "value": 18,
              "color": "attention"
            }
          ]
        },
        {
          "title": "Teams",
          "data": [
            {
              "legend": "2023-05-01",
              "value": 9,
              "color": "good"
            },
            {
              "legend": "2023-05-02",
              "value": 100,
              "color": "warning"
            },
            {
              "legend": "2023-05-03",
              "value": 22,
              "color": "attention"
            }
          ]
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.HorizontalBar.Stacked -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.HorizontalBar.Stacked sein.
color		String	Die Farbe, die für alle Datenpunkte verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data		Array mit Objekten	Die Datenpunkte im Diagramm.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieses Element nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Steuert die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement oder die Eingabeaktion.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Unterstützter Wert: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.
xAxisTitle		String	Der Titel der x-Achse.
yAxisTitle		String	Der Titel der y-Achse.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
data		Array mit Objekten	Die Datenpunkte in der Reihe.
title		String	Der Titel der Reihe.

Dies sind die Eigenschaften des geschachtelten data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
legend		String	Die Legende, die dem Datenpunkt zugeordnet ist.
value		Zahl	Der Wert des Datenpunkts.

Vertikales Balkendiagramm

Sie können das Chart.VerticalBar -Element verwenden, um ein vertikales Balkendiagramm in einer adaptiven Karte hinzuzufügen.

Karte

Nutzlast

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Chart.VerticalBar",
      "title": "Sample",
      "xAxisTitle": "Days",
      "yAxisTitle": "Sales",
      "colorSet": "categorical",
      "data": [
        {
          "x": "Pear",
          "y": 59
        },
        {
          "x": "Banana",
          "y": 292
        },
        {
          "x": "Apple",
          "y": 143
        },
        {
          "x": "Peach",
          "y": 98
        },
        {
          "x": "Kiwi",
          "y": 179
        },
        {
          "x": "Grapefruit",
          "y": 20
        },
        {
          "x": "Orange",
          "y": 212
        },
        {
          "x": "Cantaloupe",
          "y": 68
        },
        {
          "x": "Grape",
          "y": 102
        },
        {
          "x": "Tangerine",
          "y": 38
        }
      ]
    }
  ]
}

Dies sind die Eigenschaften des Chart.VerticalBar -Elements:

Eigenschaft	Erforderlich	Typ	Beschreibung
type	✔️	String	Muss Chart.VerticalBar sein.
color		String	Die Farbe, die für alle Datenpunkte verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
colorSet		String	Der Name der Gruppe von Farben, die zum Rendern des Diagramms verwendet werden sollen.
data		Array mit Objekten	Die Datenpunkte im Diagramm.
fallback		Objekt oder Zeichenfolge	Ein alternatives Element, das gerendert werden soll, wenn dieses Element nicht unterstützt wird oder wenn die Hostanwendung nicht alle in der requires -Eigenschaft angegebenen Funktionen unterstützt. Zulässige Werte: Container, ActionSet, ColumnSet, Media, RichTextBlock, Table, TextBlock, FactSet, ImageImageSet, Input.TextInput.DateIconCompoundButtonRatingInput.RatingInput.TimeInput.NumberInput.ChoiceSetInput.Toggle, , , Chart.GaugeChart.PieChart.VerticalBarCodeBlockChart.VerticalBar.GroupedChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.Donutdrop
grid.area		String	Der Bereich eines Layout.AreaGrid Layouts, in dem ein Element angezeigt werden muss.
height		String	Steuert die Höhe des Elements. Bei Festlegung auf stretchverwendet das Element den verbleibenden vertikalen Raum in seinem Container. Zulässige Werte: auto, stretch Standardwert: auto
horizontalAlignment		String	Steuert, wie das Element horizontal ausgerichtet werden muss. Zulässige Werte: Left, Center, Right
id		String	Ein eindeutiger Bezeichner für das Eingabeelement oder die Eingabeaktion.
isVisible		Boolesch	Steuert, ob das Element sichtbar ist. Standardwert: true
lang		String	Das Gebietsschema, das dem Eingabeelement zugeordnet ist.
requires		Objekt	Eine Liste der Funktionen, die das -Element benötigt, um die Hostanwendung zu unterstützen. Wenn die Hostanwendung mindestens eine der aufgeführten Funktionen nicht unterstützt, wird das Element nicht gerendert, oder sein Fallback wird gerendert, sofern angegeben. Unterstützter Wert: HostCapabilities
separator		Boolesch	Steuert, ob eine Trennlinie über dem Element angezeigt werden muss, um es visuell vom vorherigen Element zu trennen. Für das erste Element in einem Container wird kein Trennzeichen angezeigt, auch wenn diese Eigenschaft auf truefestgelegt ist. Standardwert: false
showBarValues		Boolesch	Steuert, ob die Balkenwerte angezeigt werden müssen. Standardwert: false
spacing		String	Steuert den Abstand zwischen diesem Element und dem vorherigen Element. Für das erste Element in einem Container wird kein Speicherplatz hinzugefügt. Zulässige Werte: None, Small, Default, Medium, Large, ExtraLargePadding Standardwert: Default
targetWidth		String	Steuert die Karte Breite, für die das Element angezeigt werden muss. Wenn targetWidth nicht angegeben ist, wird das Element in allen Karte Breiten gerendert. Die Verwendung von targetWidth ermöglicht es, reaktionsfähige Karten zu erstellen, die ihr Layout an den verfügbaren horizontalen Platz anpassen. Weitere Informationen finden Sie unter Responsive Layout für adaptive Karten. Zulässige Werte: VeryNarrow, Narrow, Standard, Wide, atLeast:VeryNarrow, atMost:VeryNarrow, atLeast:Narrow, atMost:Narrow, atLeast:Standard, atMost:Standard, , atLeast:WideatMost:Wide
title		String	Der Titel des Diagramms.
xAxisTitle		String	Der Titel der x-Achse.
yAxisTitle		String	Der Titel der y-Achse.

Dies sind die Eigenschaften des data Arrays:

Eigenschaft	Erforderlich	Typ	Beschreibung
color		String	Die Farbe, die für den Datenpunkt verwendet werden soll. Zulässige Werte: good, warning, attention, neutral, categoricalPurplecategoricalRed, , categoricalBlue, divergingLightReddivergingMaroondivergingTealdivergingCyandivergingPeachdivergingReddivergingYellowdivergingBluedivergingLightBluecategoricalLavendercategoricalLightBluecategoricalTealcategoricalGreencategoricalLimecategoricalMarigoldsequential1sequential2sequential3sequential4sequential5sequential6sequential7sequential8divergingGray
x		Eine der Zahlen oder Zeichenfolgen	Der x-Achsenwert des Datenpunkts.
y		Zahl	Der y-Achsenwert des Datenpunkts.

Codebeispiel

Name	Beschreibung	.Node.js	.NET
Kartenformatierung	In dieser Beispiel-App werden die verschiedenen Diagramme in adaptiven Karten veranschaulicht.	View	Anzeigen

Siehe auch

• Karten und Dialoge
• Adaptives Kartenlayout