DataV:11.11カルーセルliウィジェット

チャートスタイル

Double 11カルーセルリストヒストグラムは、ヒストグラムの一種です。 基本ヒストグラムと比較して、Double 11カルーセルリストヒストグラムは、ページめくりアニメーションの形式で複数のコンテンツ情報を表示できます。 ダブル11時の製品情報のカルーセル表示に適しています。

設定パネル

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「設定の検索」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• グローバルスタイル

  パラメーター	説明
  フォントファミリー	タイムラインウィジェット内のテキストのフォント。 デフォルト値: Microsoft YaHei
  トップ	ヒストグラムの列の上部からの距離。 単位: ピクセル
  左	カラムからカラムチャートの左への距離。 単位: ピクセル
  パディング	ヒストグラムの列の間隔。 単位: ピクセル
  数量	1ページに表示される列の数は、設定項目とデータ項目によって決まります。 例えば、番号は5に設定される。 データパネルのデータ項目が ≦ 5の場合、各ページに表示される列の数=データ項目の数。データパネルのデータ項目が ≧ 5の場合、各ページに表示される列の数=構成項目の数。
  高さ	ヒストグラムの各列の高さ。 単位: ピクセル。
  フリップ	この機能を有効にすると、カルーセル中のページめくり効果が縦棒グラフに表示されます。 この機能は、自動カルーセルが有効になった後にのみ有効になります。
  フリップアニメーション期間 (ms)	ページめくりアニメーションの各再生時間。 単位：ms。 このパラメーターは、自動カルーセルとページめくりの両方が有効な場合にのみ有効です。
  フリップアニメーション停止时间 (ms)	各ページめくりアニメーションが再生された後の待機時間。 単位：ms。 このパラメーターは、自動カルーセルとページめくりの両方が有効な場合にのみ有効です。
  次のフレーム	ページめくりアニメーションの各フレーム間のギャップ。 通常、このパラメーターは10進数に設定され、ページめくりアニメーション時間の割合を示します。
  再生間隔	ページめくりアニメーションで各フレームが前のフレームと重なる時間。 この値は通常、ページめくりアニメーション時間の割合を示すために10進数に設定されます。

• インデックス番号: 縦棒グラフの各列のシリアル番号。 アイコンをクリックすると、シリアル番号を表示するか非表示にするかを制御できます。

  • テキストスタイル: シリアル番号のテキストスタイル。

    パラメーター	説明
    フォントサイズ	シリアル番号テキストのフォントサイズ。
    フォントの色	シリアル番号テキストの色。 詳細については、「カラーピッカーの手順」をご参照ください。
    右マージン	シーケンス番号の背景ブロックとカルーセルコンテンツとの間の距離。 単位: ピクセル
    幅	シーケンス番号の背景ブロックの幅。 単位: ピクセル
    ボーダー半径	シーケンス番号の背景ブロックの角を丸めたサイズ。 単位: ピクセル 値が0の場合、角の丸めはありません。 シリアル番号の背景ブロックは正方形です。 設定値が大きいほど、丸みを帯びたコーナーのラジアン値が大きくなります。

  • 背景色: シーケンス番号の背景色。

  • 番号形式: シリアル番号テキストのスタイル。 有効な値: 1、No.1、(1) 。

• テキストスタイル: 縦棒グラフの各列のテキストスタイル。

  パラメーター	説明
  テキストスタイル	コンテンツテキストのフォントサイズと色。
  マーキー	列の幅を超えるテキストは、マーキースタイル効果を使用してすべてのテキストコンテンツを表示できます。 列の幅を超えるテキストマーキーを実行するために必要なアニメーション時間 (ms) を設定します。 アイコンをクリックして、マーキーの表示を制御します。

• バー: 縦棒グラフの列のスタイル。 アイコンをクリックすると、縦棒グラフスタイルの表示を制御できます。

  パラメーター	説明
  グラデーションカラー	右側のまたはアイコンをクリックして、データ系列の色を追加または削除します。 列は左から右に複数の色で塗りつぶされます。 またはアイコンをクリックして、複数のデータ系列の配置スタイルを設定します。 アイコンをクリックして、選択したデータ系列設定をコピーし、同じ設定のデータ系列を追加します。 位置: グラデーションバンド内の色の位置の割合。 有効な値は 0～1 です。 色: グラデーション内の位置の色。
  ボーダー半径	列のフィレットサイズ。 単位: ピクセル。 値が0の場合、角の丸みはなく、列は正方形です。 設定値が大きいほど、丸みを帯びたコーナーのラジアン値が大きくなります。
  勾配カバレッジ	カラムの勾配範囲。 有効な値: BarのみおよびFull Width。

• ライトスイープ: ストリーマアニメーションのスタイル。 アイコンをクリックすると、ストリーマスタイルを表示または非表示にできます。

  パラメーター	説明
  アニメーション期間 (ms)	カルーセル中のストリーマアニメーションの合計再生時間。 単位：ms。
  ライトスイープ一时停止时间 (ms)	ストリーマ効果が実行される間隔。 単位：ms。

• 背景色: 縦棒グラフの背景スタイル。

  パラメーター	説明
  カラー	コンテンツ棒グラフの背景色。 説明 データの値が最大値よりも小さい場合は、両者の差の縦グラフ比がこの色で塗りつぶされます。
  ボーダー半径	ヒストグラムの背景のフィレットサイズ。 単位: ピクセル。 値が0の場合、角の丸めはありません。 ヒストグラムの背景は正方形です。 値が大きいほど、丸みを帯びたコーナーのラジアン値が大きくなります。

データパネル

設定フィールドの説明

相互作用パネル

このウィジェットはインタラクションイベントをサポートしていません。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. ページの左上隅にあるアイコンをクリックします。

3. Blueprint Editorで、[ノードのインポート] ペインで [リストカルーセルI - Double 11] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、ブループリントエディターでパラメーターを表示できます。

   • イベント

     イベント	説明
     データインタフェース要求の完了時	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     データインタフェース要求の失敗	データインターフェイス要求が失敗したときに返され (要求はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

   • Action

     Action	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、カルーセルリストの縦棒グラフがhttps:// API. testとしてapiデータソースを設定し、Request data Interfaceに渡されるデータが { id: '1'} として設定されている場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     インポートデータインタフェース	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ウィジェット設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットを表示します。 参照データの例を次に示します。 return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     非表示	次の例は、ウィジェットを非表示にする方法を示しています。 return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     非表示 /表示	ウィジェットを表示します。 参照データの例を次に示します。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     移動	ウィジェットを指定した場所に移動します。 参照データの例を次に示します。 return{ // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }