次の方法で共有

GaugeChart コントロール (プレビュー)

  • [アーティクル]

[この記事はプレリリース ドキュメントであり、変更されることがあります。]

ゲージチャートには、スピードメーターとレーティングメーターの2種類があります。

GaugeChartコントロール。

スピードメーターは、ストレージ容量などの全体に対する数値を測定します。 針はオプションのコンポーネントです。 測定されている値を表す セグメント の色は、特定のシナリオに合わせてカスタマイズしたり、ブランド カラーに合わせて 位置を合わせる カスタマイズしたりできます。

評価メーターは、いくつかの定義済み範囲またはセグメント内の現在の値のステータスを表示します。 ここでは針が必須のコンポーネントです。

このコード コンポーネントは、キャンバスおよびカスタム ページで使用できる Fluent UI GaugeChart コントロールのラッパーを提供します。

重要

  • これはプレビュー機能です。
  • プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。

注意Note

完全なドキュメントとソース コードについては、 GitHubコード コンポーネント リポジトリを参照してください。 |

プロパティ​​

コントロールは次のプロパティを受容します。

  • タイトル - この値はグラフのタイトルを示します。

  • サブラベル - この値はグラフのサブラベルを示します。

  • ChartValue - この値はゲージに表示される値を示します。

  • MinValue - この値はゲージの最小値を示します。

  • MaxValue - この値はゲージの最大値を示します。

  • HideMinMax - この値は、ゲージの最小値と最大値を非表示にするかどうかを示します。

  • HideLegend - この値は、ゲージの凡例を非表示にするかどうかを示します。

  • ChartValueFormat - この値は、チャートの値を Percentage または Fractionで表示することを表します。

  • CustomColors - チャートにカスタム カラーが提供されている場合は、この値をtrueに設定します。

  • アイテム - レンダリングするアクション アイテム:

    • ItemLegend - 特定のチャート データ (アイテム) の凡例。
    • ItemSize - 特定のグラフ データ (アイテム) のサイズ。
    • ItemColor - 特定のチャート データ (アイテム) に表示される色の名前またはHEX値を設定します。

注意

アイテムの色は、CustomColors プロパティがオンになっている場合にのみ適用されます。

アクセシビリティ

  • AccessibilityLabel - 画面 閲覧者aria-label。

使い方

スピードメーター

Itemsには1行だけ必要です。 ChartValue を使用してターゲット位置を示します。

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

評価メーター

範囲を Items プロパティとして指定します。 すべての ItemSize 値の合計は、 MinValue と MaxValueの差の100% になる必要があります。 現在の位置を示すには、 ChartValue を使用します。

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

制限

このキャンバス コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。