通过

GaugeChart Control（预览版）

  • 项目

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

仪表图有两种类型：Speedometer 和 rating meter。

GaugeChart 控件。

车速表根据整体（如存储容量）测量数值。 针是可选组件。 可以自定义表示所测量值的区段的颜色，以适应某些情况或与品牌颜色对齐。

评分指示器显示几个预定义范围或段内当前值的状态。 针在这里是必需的组件。

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

重要提示

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

备注

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

属性

该控件接受以下属性：

  • 标题 - 此值表示图表的标题。

  • Sublabel（子标签 ）- 此值表示图表的子标签。

  • ChartValue - 此值表示要在仪表上显示的值。

  • MinValue - 此值表示仪表的最小值。

  • MaxValue - 此值表示仪表的最大值。

  • HideMinMax - 此值表示是否隐藏仪表上的最小值和最大值。

  • HideLegend - 此值表示是否隐藏仪表上的图例。

  • ChartValueFormat - 此值表示在 or Percentage 中 Fraction显示图表值。

  • CustomColors - 将此值设置为 true，以允许在图表上使用自定义颜色（如果提供）。

  • Items - 要渲染的操作项：

    • ItemLegend - 特定图表数据（Item）的显示名称。
    • ItemSize - 特定图表数据（Item）的大小。
    • ItemColor - 设置要为特定图表数据（Item）显示的颜色名称或十六进制值。

备注

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

辅助功能

  • AccessibilityLabel - 屏幕读者 aria-label。

用法

速度计

只需要一行。 Items 使用表示 ChartValue 目标位置。

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

额定值计

提供范围作为属性 Items 。 所有 ItemSize 值的总和必须等于 and MinValue 之间 MaxValue差值的 100%。 使用指示 ChartValue 当前位置。

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

限制

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