Диаграммы в адаптивных карточках

Статья
11/07/2024

Данные можно визуально представить с помощью диаграмм в адаптивных карточках. Диаграммы можно использовать для панелей мониторинга производительности, распределения бюджета, управления проектами, аналитики клиентов и многого другого.

Пончатая диаграмма

Элемент можно использовать для Chart.Donut добавления пончиков в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: пончик в адаптивной карточке.

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

Ниже приведены свойства Chart.Donut элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.Donut`.
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`	✔️	Массив объектов	Данные, отображаемые на диаграмме.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот тип элемента не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Высота элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор элемента или действия.
`isVisible`		Логический	Управляет видимостью элемента. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Допустимые значения: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.

Ниже приведены свойства массива data .

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`legend`	String	Условные обозначения диаграммы.
`value`	Номер	Значение, связанное с точкой данных.

Датчик диаграммы

Элемент можно использовать для Chart.Gauge добавления датчика в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: диаграмма датчика в адаптивной карточке.

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

Ниже приведены свойства Chart.Gauge элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.Gauge`.
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот тип элемента не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Высота элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`max`		Номер	Максимальное значение датчика.
`min`		Номер	Минимальное значение датчика.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Допустимые значения: `HostCapabilities`
`segments`		Массив объектов	Сегменты, отображаемые в датчике.
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`showLegend`		Логический	Определяет, должна ли отображаться легенда. Значение по умолчанию: `true`
`showMinMax`		Логический	Определяет, должны ли отображаться значения min или max. Значение по умолчанию: `true`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`subLabel`		String	Вложенная метка датчика.
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.
`value`		Номер	Значение датчика. Значение по умолчанию: 0
`valueFormat`		String	Формат, используемый для отображения значения датчика. Допустимые значения: `Percentage`, `Fraction` Значение по умолчанию: `Percentage`

Ниже приведены свойства массива segments .

Property	Тип	Описание
`color`	String	Цвет, используемый для сегмента. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`legend`	String	Текст легенды, связанный с сегментом.
`value`	Номер	Размер сегмента. Значение по умолчанию: `0`

Сгруппированная вертикальная линейчатая диаграмма

Элемент можно использовать для Chart.VerticalBar.Grouped добавления вертикальной линейчатой диаграммы с группировкой или с накоплением в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: сгруппированная вертикальная линейчатая диаграмма в адаптивной карточке.

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

Ниже приведены свойства Chart.VerticalBar.Grouped элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.VerticalBar.Grouped`.
`color`		String	Цвет, используемый для всех точек данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`		Массив объектов	Точки данных на диаграмме.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот элемент не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Управляет высотой элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента или действия.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Поддерживаемое значение: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`showBarValues`		Логический	Определяет, должны ли отображаться значения полосы. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.
`xAxisTitle`		String	Заголовок оси x.
`yAxisTitle`		String	Заголовок оси y.

Ниже приведены свойства массива data .

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`legend`	String	Условные обозначения диаграммы.
`values`	Номер	Точки данных в ряде.

Ниже приведены свойства :values

Property	Обязательный	Тип	Описание
`x`		String	Значение оси X точки данных.
`y`		Номер	Значение оси y точки данных.

Горизонтальная линейчатая диаграмма

Элемент можно использовать для Chart.HorizontalBar добавления горизонтальной линейчатой диаграммы в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: горизонтальная линейчатая диаграмма в адаптивной карточке.

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

Ниже приведены свойства Chart.HorizontalBar элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.HorizontalBar`.
`color`		String	Цвет, используемый для всех точек данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`		Массив объектов	Точки данных на диаграмме.
`displayMode`		String	Управляет тем, как диаграмма должна быть визуально выложена. Допустимые значения: `AbsoluteWithAxis`,`AbsoluteNoAxisPartToWhole` Значение по умолчанию: `AbsoluteWithAxis`
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот элемент не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Управляет высотой элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента или действия.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Поддерживаемое значение: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.
`xAxisTitle`		String	Заголовок оси x.
`yAxisTitle`		String	Заголовок оси y.

Ниже приведены свойства массива data .

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`x`	String	Значение оси X точки данных.
`y`	Номер	Значение оси y точки данных.

График

Элемент можно использовать для Chart.Line добавления графиков в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: график в адаптивной карточке.

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

Ниже приведены свойства Chart.Line элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.Line`.
`color`		String	Цвет, используемый для всех точек данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`		Массив объектов	Точки данных на диаграмме.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот элемент не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Управляет высотой элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента или действия.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Поддерживаемое значение: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.
`xAxisTitle`		String	Заголовок оси x.
`yAxisTitle`		String	Заголовок оси y.

Ниже приведены свойства массива data .

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`legend`	String	Условные обозначения диаграммы.
`values`	Массив объектов	Точки данных в ряде.

Ниже приведены свойства :values

Property	Обязательный	Тип	Описание
`x`		Число или строка	Значение оси X точки данных.
`y`		Номер	Значение оси y точки данных.

Секторная диаграмма

Элемент можно использовать для Chart.Pie добавления круговой диаграммы в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: круговая диаграмма в адаптивной карточке.

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

Ниже приведены свойства Chart.Pie элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.Pie`.
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`		Массив объектов	Данные, отображаемые на диаграмме.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот элемент не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Управляет высотой элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента или действия.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Поддерживаемое значение: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.

Ниже приведены свойства массива data .

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`legend`	String	Условные обозначения диаграммы.
`value`	Номер	Значение, связанное с точкой данных.

Горизонтальная линейчатая диаграмма с накоплением

Элемент можно использовать для Chart.HorizontalBar.Stacked добавления горизонтальной линейчатой диаграммы с накоплением в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: горизонтальная линейчатая диаграмма с накоплением в адаптивной карточке.

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

Ниже приведены свойства Chart.HorizontalBar.Stacked элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.HorizontalBar.Stacked`.
`color`		String	Цвет, используемый для всех точек данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`		Массив объектов	Точки данных на диаграмме.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот элемент не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Управляет высотой элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента или действия.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Поддерживаемое значение: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.
`xAxisTitle`		String	Заголовок оси x.
`yAxisTitle`		String	Заголовок оси y.

Ниже приведены свойства массива data .

Property	Обязательный	Тип	Описание
`data`		Массив объектов	Точки данных в ряде.
`title`		String	Название серии.

Ниже приведены свойства вложенного массива data :

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`legend`	String	Легенда, связанная с точкой данных.
`value`	Номер	Значение точки данных.

Вертикальная линейчатая диаграмма

Элемент можно использовать для Chart.VerticalBar добавления вертикальной линейчатой диаграммы в адаптивную карточку.

Карточка
Полезные данные

Снимок экрана: вертикальная линейчатая диаграмма в адаптивной карточке.

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

Ниже приведены свойства Chart.VerticalBar элемента:

Property	Обязательный	Тип	Описание
`type`	✔️	String	Должно быть задано значение `Chart.VerticalBar`.
`color`		String	Цвет, используемый для всех точек данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`colorSet`		String	Имя набора цветов, используемых для отрисовки диаграммы.
`data`		Массив объектов	Точки данных на диаграмме.
`fallback`		Объект или строка	Альтернативный элемент для отображения, если этот элемент не поддерживается или если ведущее приложение не поддерживает все возможности, указанные в свойстве `requires` . Допустимые значения: `Container`, `ActionSet`, `ColumnSet`, `Media`, `RichTextBlock`, `Table`, `TextBlock`, `FactSet`, `ImageImageSet`, `Input.TextInput.TimeInput.DateInput.ChoiceSetInput.RatingRatingIconChart.PieInput.ToggleCompoundButtonInput.NumberChart.Donut`, `Chart.VerticalBar.Grouped`, , `CodeBlockChart.HorizontalBarChart.HorizontalBar.StackedChart.LineChart.GaugeChart.VerticalBardrop`
`grid.area`		String	Область макета `Layout.AreaGrid` , в которой должен отображаться элемент.
`height`		String	Управляет высотой элемента. Если задано значение `stretch`, элемент использует оставшееся вертикальное пространство в контейнере. Допустимые значения: `auto`, `stretch` Значение по умолчанию: `auto`
`horizontalAlignment`		String	Определяет, как элемент должен быть выровнен по горизонтали. Допустимые значения: `Left`, `Center`, `Right`
`id`		String	Уникальный идентификатор входного элемента или действия.
`isVisible`		Логический	Определяет, является ли элемент видимым. Значение по умолчанию: `true`
`lang`		String	Языковой стандарт, связанный с элементом ввода.
`requires`		Объект	Список возможностей, которые требуется для поддержки элемента ведущем приложении. Если ведущее приложение не поддерживает хотя бы одну из перечисленных возможностей, элемент не отображается или отрисовывается его резервная отрисовка, если она указана. Поддерживаемое значение: `HostCapabilities`
`separator`		Логический	Определяет, должна ли линия разделителя отображаться над элементом, чтобы визуально отделить ее от предыдущего элемента. Для первого элемента в контейнере не отображается разделитель, даже если для этого свойства задано значение `true`. Значение по умолчанию: `false`
`showBarValues`		Логический	Определяет, должны ли отображаться значения полосы. Значение по умолчанию: `false`
`spacing`		String	Управляет объемом пространства между этим элементом и предыдущим элементом. Место для первого элемента в контейнере не добавляется. Допустимые значения: `None`, `Small`, `Default`, `Medium`, `Large`, `ExtraLarge`, `Padding` Значение по умолчанию: `Default`
`targetWidth`		String	Управляет шириной карта, для которой должен отображаться элемент. Если `targetWidth` параметр не указан, элемент отображается на всех карта ширины. Использование `targetWidth` позволяет создавать адаптивные карточки, которые адаптируют их макет к доступному горизонтальному пространству. Дополнительные сведения см. в разделе Адаптивный макет адаптивной карточки. Допустимые значения: `VeryNarrow`, `Narrow`, `Standard`, `Wide`, `atLeast:VeryNarrow`, `atMost:VeryNarrow`, `atLeast:Narrow`, `atMost:Narrow`, , `atLeast:WideatLeast:StandardatMost:StandardatMost:Wide`
`title`		String	Название диаграммы.
`xAxisTitle`		String	Заголовок оси x.
`yAxisTitle`		String	Заголовок оси y.

Ниже приведены свойства массива data .

Property	Тип	Описание
`color`	String	Цвет, используемый для точки данных. Допустимые значения: `good`, `warning`, `attention`, `neutral`, `categoricalRed`, `categoricalPurple`, `categoricalLavender`, `categoricalBlue`, `categoricalTealcategoricalLightBlue`, , `categoricalLimecategoricalGreen`, `categoricalMarigoldsequential3sequential2sequential7sequential1sequential5sequential6divergingBluesequential8divergingLightBluesequential4`, `divergingCyan`, , `divergingTeal`, , `divergingPeachdivergingLightReddivergingReddivergingMaroondivergingYellowdivergingGray`
`x`	Число или строка	Значение оси X точки данных.
`y`	Номер	Значение оси y точки данных.

Пример кода

Имя	Описание	.Node.js	.NET
Форматирование карточек	В этом примере приложения демонстрируются различные диаграммы в адаптивных карточках.	Просмотр	Просмотр

Поделиться через

Диаграммы в адаптивных карточках

Пончатая диаграмма

Датчик диаграммы

Сгруппированная вертикальная линейчатая диаграмма

Горизонтальная линейчатая диаграмма

График

Секторная диаграмма

Горизонтальная линейчатая диаграмма с накоплением

Вертикальная линейчатая диаграмма

Пример кода

См. также

Дополнительные ресурсы