テーブル横棒グラフのウィジェット — 11.11 グローバルショッピングフェスティバルでは、1 つ以上のテーブル横棒グラフをプロジェクトに追加して、11.11 グローバルショッピングフェスティバル中にさまざまな製品のデータを表示できます。

スタイル

  • 基本属性
    • Size：幅と高さを調整して、ウィジェットのサイズを設定します。
    • Position：横座標と縦座標を調整して、ウィジェットの位置を設定します。
    • Others：ウィジェットの回転角度と不透明度を設定します。
  • 全般
    • フォントファミリ: 表示されるテキストのフォントを設定するには、ドロップダウン矢印をクリックして目的のフォントを選択します。 デフォルトのフォントは Microsoft YaHei です。
    • 行のパディング: バーの間隔を調整するには、値を入力する [+] または [-] をクリックします。
    • 数量: 表示されるバーの数を変更するには、値を入力するか、 [+] または [-] をクリックします。
    • 高さ: 各バーの高さを変更するには、値を入力するか、 [+] または [-] をクリックします。
    • ループ
      • このオプションを選択すると、各バーのテキストは自動的に順番に表示されます。
      • このオプションをオフにした場合、各バーのテキストは自動的に順番に表示されません。
      注 この機能をオンにしてから数秒後にループ機能が有効になります。
    • 反転
      • このオプションをオンにすると、反転効果が表示されます。
      • このオプションをオフにすると、フリップトランジション効果は表示されず、最初のページのデータのみが表示されます。
    • フリップアニメーションの長さ: フリップトランジションの長さを変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
    • フリップアニメーションの停止時間: フリップトランジションの間隔を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
    • 次のフレーム: 2 本のバー間のフリップ遷移の間隔を変更するには、値を入力するか、 [+] または [-] をクリックします。
    • 再生間隔: 2 つのフレーム間のオーバーラップ時間を変更するには、値を入力するか、 [+] または [-] をクリックします。
  • インデックス番号 – テキストスタイル: インデックス番号を表示するには、 目のアイコンをクリックします。
    • フォントサイズ: インデックス番号のフォントサイズを変更するには、値を入力するか、 [+] または [-] をクリックします。
    • フォントの色: インデックス番号のフォントの色を変更するには 、「カラーピッカー」をご参照ください。
    • 右余白: インデックス番号と表示されるテキストの間の水平方向の間隔を調整するには、値を入力するか、 [+]または [-] をクリックします。
    • 幅: 必要に応じてインデックス番号ブロックの幅をカスタマイズできます。 単位はピクセルです。
    • 枠の半径: 必要に応じてインデックス番号ブロックの枠の半径をカスタマイズできます。 単位はピクセルです。
    • 背景色: インデックス番号ブロックの背景色を変更するには、「 カラーピッカー」をご参照ください。
    • 数値の形式: インデックス番号の形式を設定するには、ドロップダウン矢印をクリックして目的の形式を選択します。 形式は、 "1"、 "No. 1" または "(1)" です。
  • コンテンツ
    • テキストスタイル
      • フォントサイズ: 表示されるテキストのフォントサイズを変更するには、値を入力するか、 [+] または [-] をクリックします。
      • フォントの色: 表示されるテキストのフォントの色を変更するには、「 カラーピッカー」をご参照ください。
    • マーキー: マーキーエフェクトを表示するためには、目アイコンをクリックします。
      • アニメーションの長さ: (テキストがバーの幅を超過したときに表示される) スクローリングテキストの表示時間を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
  • バー: グラフスタイルを表示するには、目アイコンをクリックします。
    • グラデーションカラー: 色を追加または削除するには、 [+] クリックするか、 ゴミ箱アイコンをクリックします。 バーの色は左から右に変わります。
      • 位置: バーの色のスケールを変更するには、値を入力するかスライダをドラッグします。
      • 色: バーの色を変更するには、「カラーピッカー」をご参照ください。
    • 枠の半径: 必要に応じてバーの枠の半径をカスタマイズできます。 単位はピクセルです。
    • グラデーションの範囲: グラデーションの範囲を調整するには、ドロップダウン矢印をクリックしてターゲットの範囲を選択します。
      • バーのみ
      • 全幅
  • ライトスイープ: ライトスイープオプションを表示するには、目アイコンをクリックします。
    • アニメーション期間: ライトスイープ期間を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
    • ライトスイープの一時停止時間: ライトスイープ間隔を変更するには、値を入力するか、 [+] または [-] をクリックします。
  • 背景色
    • 色: 各バーの背景色を変更するには、 「カラーピッカー」をご参照ください。
      注 データペインの値が最大値より小さい場合、2 つの値の差はこの色で塗りつぶされます。
    • 枠半径: 必要に応じて背景バーの枠半径をカスタマイズできます。 単位はピクセルです。

データ

  • value: バーの幅。 重さが大きいほど、バーの比率は大きくなります。
  • content: 各バーに表示されるテキスト。

インタラクション

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