Gráficos em Cartões Ajustáveis

Artigo
11/07/2024

Pode representar visualmente dados através de gráficos em Cartões Ajustáveis. Pode utilizar gráficos para dashboards de desempenho, alocações de orçamento, gestão de projetos, informações do cliente e muito mais.

Gráfico em anel

Pode utilizar o Chart.Donut elemento para adicionar um gráfico em anel num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico em anel num Cartão Ajustável.

{
  "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
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.Donut elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.Donut`.
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`	✔️	Matriz de objetos	Os dados a apresentar no gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este tipo de elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	A altura do elemento . Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação.
`isVisible`		Booliano	Controla a visibilidade do elemento . Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valores permitidos: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.

Eis as propriedades da data matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`legend`	Cadeia de caracteres	A legenda do gráfico.
`value`	Número	O valor associado ao ponto de dados.

Gráfico de medidor

Pode utilizar o Chart.Gauge elemento para adicionar um gráfico de medidor num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico de medidor num Cartão Ajustável.

{
  "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"
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.Gauge elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.Gauge`.
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este tipo de elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	A altura do elemento . Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`max`		Número	O valor máximo do medidor.
`min`		Número	O valor mínimo do medidor.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valores permitidos: `HostCapabilities`
`segments`		Matriz de objetos	Os segmentos a apresentar no medidor.
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`showLegend`		Booliano	Controla se a legenda tem de ser apresentada. Valor predefinido: `true`
`showMinMax`		Booliano	Controla se os valores mínimo ou máximo têm de ser apresentados. Valor predefinido: `true`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`subLabel`		Cadeia de caracteres	A subetiqueta do medidor.
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.
`value`		Número	O valor do medidor. Valor predefinido: 0
`valueFormat`		Cadeia de caracteres	O formato utilizado para apresentar o valor do medidor. Valores permitidos: `Percentage`, `Fraction` Valor predefinido: `Percentage`

Eis as propriedades da segments matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o segmento. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`legend`	Cadeia de caracteres	O texto da legenda associado ao segmento.
`value`	Número	O tamanho do segmento. Valor predefinido: `0`

Gráfico de barras verticais agrupadas

Pode utilizar o Chart.VerticalBar.Grouped elemento para adicionar um gráfico de barras vertical agrupado ou empilhado num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico de barras vertical agrupado num Cartão Ajustável.

{
  "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
            }
          ]
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.VerticalBar.Grouped elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.VerticalBar.Grouped`.
`color`		Cadeia de caracteres	A cor a utilizar para todos os pontos de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`		Matriz de objetos	Os pontos de dados no gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	Controla a altura do elemento. Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valor suportado: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`showBarValues`		Booliano	Controla se os valores da barra têm de ser apresentados. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.
`xAxisTitle`		Cadeia de caracteres	O título do eixo x.
`yAxisTitle`		Cadeia de caracteres	O título do eixo y.

Eis as propriedades da data matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`legend`	Cadeia de caracteres	A legenda do gráfico.
`values`	Número	Os pontos de dados na série.

Eis as propriedades de values:

Propriedade	Obrigatório	Tipo	Descrição
`x`		Cadeia de caracteres	O valor do eixo x do ponto de dados.
`y`		Número	O valor do eixo y do ponto de dados.

Gráfico de barras horizontal

Pode utilizar o Chart.HorizontalBar elemento para adicionar um gráfico de barras horizontal num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico de barras horizontal num Cartão Ajustável.

{
  "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
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.HorizontalBar elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.HorizontalBar`.
`color`		Cadeia de caracteres	A cor a utilizar para todos os pontos de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`		Matriz de objetos	Os pontos de dados no gráfico.
`displayMode`		Cadeia de caracteres	Controla a forma como o gráfico tem de ser apresentado visualmente. Valores permitidos: `AbsoluteWithAxis`,`AbsoluteNoAxis`,`PartToWhole` Valor predefinido: `AbsoluteWithAxis`
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	Controla a altura do elemento. Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valor suportado: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.
`xAxisTitle`		Cadeia de caracteres	O título do eixo x.
`yAxisTitle`		Cadeia de caracteres	O título do eixo y.

Eis as propriedades da data matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`x`	Cadeia de caracteres	O valor do eixo x do ponto de dados.
`y`	Número	O valor do eixo y do ponto de dados.

Gráfico de linhas

Pode utilizar o Chart.Line elemento para adicionar um gráfico de linhas num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico de linhas num Cartão Ajustável.

{
  "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
            }
          ]
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.Line elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.Line`.
`color`		Cadeia de caracteres	A cor a utilizar para todos os pontos de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`		Matriz de objetos	Os pontos de dados no gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	Controla a altura do elemento. Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valor suportado: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.
`xAxisTitle`		Cadeia de caracteres	O título do eixo x.
`yAxisTitle`		Cadeia de caracteres	O título do eixo y.

Eis as propriedades da data matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`legend`	Cadeia de caracteres	A legenda do gráfico.
`values`	Matriz de objetos	Os pontos de dados na série.

Eis as propriedades de values:

Propriedade	Obrigatório	Tipo	Descrição
`x`		Um de número ou cadeia	O valor do eixo x do ponto de dados.
`y`		Número	O valor do eixo y do ponto de dados.

Gráfico circular

Pode utilizar o Chart.Pie elemento para adicionar um gráfico circular num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico circular num Cartão Ajustável.

{
  "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
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.Pie elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.Pie`.
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`		Matriz de objetos	Os dados a apresentar no gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	Controla a altura do elemento. Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valor suportado: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.

Eis as propriedades da data matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`legend`	Cadeia de caracteres	A legenda do gráfico.
`value`	Número	O valor associado ao ponto de dados.

Gráfico de barras horizontais empilhadas

Pode utilizar o Chart.HorizontalBar.Stacked elemento para adicionar um gráfico de barras horizontais empilhadas num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico de barras horizontal empilhada num Cartão Ajustável.

{
  "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"
            }
          ]
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.HorizontalBar.Stacked elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.HorizontalBar.Stacked`.
`color`		Cadeia de caracteres	A cor a utilizar para todos os pontos de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`		Matriz de objetos	Os pontos de dados no gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	Controla a altura do elemento. Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valor suportado: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.
`xAxisTitle`		Cadeia de caracteres	O título do eixo x.
`yAxisTitle`		Cadeia de caracteres	O título do eixo y.

Eis as propriedades da data matriz:

Propriedade	Obrigatório	Tipo	Descrição
`data`		Matriz de objetos	Os pontos de dados na série.
`title`		Cadeia de caracteres	O título da série.

Eis as propriedades da matriz aninhada data :

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`legend`	Cadeia de caracteres	A legenda associada ao ponto de dados.
`value`	Número	O valor do ponto de dados.

Gráfico de barras vertical

Pode utilizar o Chart.VerticalBar elemento para adicionar um gráfico de barras vertical num Cartão Ajustável.

Cartão
Conteúdo

Captura de ecrã a mostrar um gráfico de barras vertical num Cartão Ajustável.

{
  "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
        }
      ]
    }
  ]
}

Eis as propriedades do Chart.VerticalBar elemento:

Propriedade	Obrigatório	Tipo	Descrição
`type`	✔️	Cadeia de caracteres	Deve ser `Chart.VerticalBar`.
`color`		Cadeia de caracteres	A cor a utilizar para todos os pontos de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`colorSet`		Cadeia de caracteres	O nome do conjunto de cores a utilizar para compor o gráfico.
`data`		Matriz de objetos	Os pontos de dados no gráfico.
`fallback`		Objeto ou Cadeia	Um elemento alternativo a compor se este elemento não for suportado ou se a aplicação anfitriã não suportar todas as capacidades especificadas na `requires` propriedade. Valores permitidos: `Container`, , `ActionSetColumnSet`, `Media`, `RichTextBlock`, `Table`, `FactSetImageSetTextBlock`, `ImageInput.Text`, `Input.Date`, `Input.Time`, , `Input.Number`, `Input.ChoiceSetRatingInput.ToggleInput.Rating`, , `CompoundButton`, `Icon`, , `Chart.Donut`, `Chart.Pie`, `Chart.VerticalBar.Grouped`, , `Chart.VerticalBarChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeCodeBlockdrop`
`grid.area`		Cadeia de caracteres	A área de um `Layout.AreaGrid` esquema no qual um elemento tem de ser apresentado.
`height`		Cadeia de caracteres	Controla a altura do elemento. Quando definido como `stretch`, o elemento utiliza o espaço vertical restante no respetivo contentor. Valores permitidos: `auto`, `stretch` Valor predefinido: `auto`
`horizontalAlignment`		Cadeia de caracteres	Controla a forma como o elemento tem de estar alinhado horizontalmente. Valores permitidos: `Left`, , `CenterRight`
`id`		Cadeia de caracteres	Um identificador exclusivo para o elemento ou ação de entrada.
`isVisible`		Booliano	Controla se o elemento está visível. Valor predefinido: `true`
`lang`		Cadeia de caracteres	A região associada ao elemento de entrada.
`requires`		Objeto	Uma lista de capacidades que o elemento requer que a aplicação anfitriã suporte. Se a aplicação anfitriã não suportar, pelo menos, uma das capacidades listadas, o elemento não é composto ou a sua contingência é composta, se for fornecida. Valor suportado: `HostCapabilities`
`separator`		Booliano	Controla se uma linha de separador tem de ser apresentada acima do elemento para separá-la visualmente do elemento anterior. Não é apresentado nenhum separador para o primeiro elemento num contentor, mesmo que esta propriedade esteja definida como `true`. Valor predefinido: `false`
`showBarValues`		Booliano	Controla se os valores da barra têm de ser apresentados. Valor predefinido: `false`
`spacing`		Cadeia de caracteres	Controla a quantidade de espaço entre este elemento e o anterior. Não é adicionado espaço para o primeiro elemento num contentor. Valores permitidos: `None`, , `SmallDefault`, `Medium`, `Large`, , `ExtraLarge`,`Padding` Valor predefinido: `Default`
`targetWidth`		Cadeia de caracteres	Controla a largura card para a qual o elemento tem de ser apresentado. Se `targetWidth` não for especificado, o elemento é composto em todas as larguras card. A utilização `targetWidth` permite criar cartões reativos que adaptam o esquema ao espaço horizontal disponível. Para obter mais informações, veja Esquema reativo do Cartão Adaptável. Valores permitidos: `VeryNarrow`, , `Narrow`, `WideStandard`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, `atLeast:Standard`, , , `atLeast:WideatMost:StandardatMost:Wide`
`title`		Cadeia de caracteres	O título do gráfico.
`xAxisTitle`		Cadeia de caracteres	O título do eixo x.
`yAxisTitle`		Cadeia de caracteres	O título do eixo y.

Eis as propriedades da data matriz:

Propriedade	Tipo	Descrição
`color`	Cadeia de caracteres	A cor a utilizar para o ponto de dados. Valores permitidos: `good`, , `warningattention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalBluecategoricalLightBluecategoricalLavender`, `categoricalTealcategoricalGreen`, `categoricalLime`, , `categoricalMarigold`, `sequential1`, `sequential2sequential4sequential3`, `sequential5`, `sequential6`, , `sequential7`, , `divergingBluesequential8`, , `divergingLightBlue`, `divergingCyan`, , `divergingTealdivergingYellowdivergingPeachdivergingLightReddivergingReddivergingMaroondivergingGray`
`x`	Um de número ou cadeia	O valor do eixo x do ponto de dados.
`y`	Número	O valor do eixo y do ponto de dados.

Exemplo de código

Nome	Descrição	.Node.js	.NET
Formatação de Cartões	Esta aplicação de exemplo demonstra os vários gráficos em Cartões Ajustáveis.	View	Exibir

Compartilhar via

Gráficos em Cartões Ajustáveis

Gráfico em anel

Gráfico de medidor

Gráfico de barras verticais agrupadas

Gráfico de barras horizontal

Gráfico de linhas

Gráfico circular

Gráfico de barras horizontais empilhadas

Gráfico de barras vertical

Exemplo de código

Confira também

Recursos adicionais