通过

HorizontalBarChart Control（预览版）

  • 项目

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

水平条形图是一种图表，它使用矩形条表示分类数据，其长度与它们所表示的值成正比。 当目的是显示各种类别之间的比较并且这些类别的标签很长时，这种类型的图表非常有用。

HorizontalBarChart 控件。

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

重要提示

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

备注

完整的文档和源代码可在 GitHub 代码组件存储库中找到。

属性

该控件接受以下属性：

  • 标题 - 此值表示图表的标题。
  • HideLabels - 将此选项设置为 true 以隐藏图表上的标签。
  • BarHeight - 此值表示图表中显示的条形的高度。
  • HideTooltip - 将此选项设置为 true 可在图表上隐藏工具提示。
  • CustomColors - 将此选项设置为 true，以允许在图表上显示自定义颜色（如果提供）。
  • Variant - 此选项允许图表显示在 Absolute scale or Part to whole 中。
  • ChartDataMode - 此选项用于显示 or Fraction 中 Percentage每个条形的值。
  • Items - 要渲染的操作项：
    • ItemTitle - 特定图表数据（Item）的显示名称。
    • ItemLegend - 与特定图表数据（Item）关联的图例。
    • ItemValue - 设置特定图表数据（Item）的值。
    • ItemTotalValue - 用于特定图表数据（Item）的总值。
    • ItemXPopover - 特定图表数据（Item）的 X 轴弹出文本。
    • ItemYPopover - 特定图表数据（Item）的 Y 轴弹出框文本。
    • ItemColor - 设置要为特定图表数据（Item）显示的颜色名称或十六进制值。

备注

  • 仅当 CustomColors 属性打开时，项目颜色才适用。
  • 当图表类型为 'Absolute Scale' 时，隐藏标签有效。
  • Hide tooltips 在播放应用程序时（不在 Studio 中）工作正常，但在 Studio 中可能无法呈现。

辅助功能

  • AccessibilityLabel - 屏幕读者 aria-label。

用法

将数据值映射到控件属性中 Items 的相应图表属性，如下面的公式所示。

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

限制

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