インジケーター付き円グラフウィジェットを使用すると、円グラフのスタイル、目標達成度、および必要に応じてその他のオプションをカスタマイズできます。

スタイル

  • 基本属性
    • Size：幅と高さを調整して、ウィジェットのサイズを設定します。
    • Position：横座標と縦座標を調整して、ウィジェットの位置を設定します。
    • Others：ウィジェットの回転角度と不透明度を設定します。
  • テキスト領域
    • フォントファミリ: 上下のラベルテキストのフォントを設定するには、ドロップダウン矢印をクリックして目的のフォントを選択します。 デフォルトのフォントは Microsoft YaHei です。
    • フォントの色: 上下のラベルテキストのフォントの色を変更するには、 「カラーピッカー」をご参照ください。
    • 目標テキスト: 下のラベルのテキストをカスタマイズできます。
    • 現在の進行状況テキスト: 最上のラベルのテキストをカスタマイズできます。
    • フォントサイズ: 上下のラベルテキストのフォントサイズを変更するには、値を入力するか、スライダをドラッグします。 値の範囲は 12 から 100 です。
    • フォントの太さ: 上下のラベルテキストのフォントの太さを設定するには、ドロップダウン矢印をクリックしてターゲットのフォントの太さを選択します。
  • チャート
    • 進捗カラー
      • 塗りつぶし
      • グラデーション塗りつぶし: グラデーションカラーとして 2 色を選択できます。 グラデーション角度を変更するには、値を入力するか、スライダをドラッグします。 値の範囲は、0 から 360 です。
    • 進行状況の背景色: ターゲットサークルの色を変更するには、「カラーピッカー」をご参照ください。
      注 ターゲット円は進行円の下にあります。
    • 越境色: 境界を越える円の色を変更するには、「カラーピッカー」をご参照ください。
      注 実際の値が目標値を超えると、境界を越える円が表示されます。
    • 内側の色: 内側の円の色を変更するには、「カラーピッカー」をご参照ください。
    • 内側の線の色: 内側の線の色を変更するには、「カラーピッカー」をご参照ください。
    • 内側のラベルの色: 内側の円のパーセント値の色を変更するには、「カラーピッカー」をご参照ください。
    • フォントサイズ: 内側の円のパーセント値のフォントサイズを変更するには、値を入力するか、スライダをドラッグします。 値の範囲は 12 から 100 です。
    • 枠のサイズ: 内枠と外枠の太さを設定するには、値を入力するか、 [+] または [-] をクリックします。
    • マージン
      • 上部: 円グラフと上部ラベルの間隔を設定するには、値を入力するか、 [+] または [-]をクリックします。
      • 下部: 円グラフと下のラベルの間の距離を設定するには、値を入力するか、 [+] または [-]をクリックします。
  • アニメーション: アニメーションオプションを表示するには、 目アイコンをクリックします。
    • 元の期間: ウィジェットが最初にアニメーションをレンダリングする期間を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
    • イージング: アニメーションイージングを設定するには、ドロップダウン矢印をクリックして目的の効果を選択します。
    • データアップデートの期間: データが変更になったときのアニメーション期間を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
    • 最新の状態から更新: このオプションをオンにすると、アニメーションはデータが変更されたセグメントから始まります。 このオプションをオフにすると、アニメーションは開始点から始まります。

データ

  • aims: 目標値
  • actual: 進捗値 (実際のデータ値)

インタラクション

このウィジェットはまだイベントにバインドされていません。