HorizontalBarChart - Stacked Control（预览版）

[本文为预发布文档，可能会发生变化。]

水平堆叠式条形图以堆叠式条形图的形式显示多个数据系列，每个条形图代表一个类别。 条形彼此并排堆叠，每个条形的长度代表系列类别的值。

此代码组件为 Fluent UI HorizontalBarChart - Stacked 控件提供了一个包装器，用于画布和自定义页面。

重要提示

• 这是一项预览功能。
• 预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前推出，以便客户可以提前使用并提供反馈。

备注

有关完整的文档和源代码，请参阅 GitHub 代码组件存储库。

属性

该控件接受以下属性：

• HideLegend - 此值表示是在图表上显示还是隐藏图例。

• BarHeight - 此值表示图表中显示的条形的高度。

• HideTooltip - 此选项控制是否在图表上显示或隐藏工具提示。

• CustomColors - 此选项用于在图表上显示自定义颜色（如果提供）

• Items - 要渲染的操作项

  • ItemTitle - 特定图表数据（Item）的显示名称。
  • ItemKey - 用于标识 Item 的键。 键必须是唯一的。
  • ItemValue - 设置特定图表数据（Item）的值。
  • ItemColor - 设置要为特定图表数据（Item）显示的颜色名称或十六进制值。
  • ItemCallout - 设置要在弹出窗口/工具提示上显示的值。

备注

仅当 CustomColors 属性打开时，项目颜色才适用。

辅助功能

• AccessibilityLabel - 屏幕读者 aria-label

用法

将数据值映射到控件的 Items 属性中相应的图表属性，如下面的公式所示。 图表会自动调整视觉效果以匹配相对值。

启用 CustomColors 属性来定义一致的颜色。

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

限制

此画布组件只能在画布应用和自定义页面中使用。