DataV:ラッキードローのカルーセルチャート

チャートスタイル

描画画像カルーセルは、ランダムに描画された賞品のカルーセルをシミュレートするために使用されるコンポーネントです。

設定

• 検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。

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

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

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

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

  • アイコンの黒い点をドラッグして、ウィジェットの回転角度を制御します。

  • アイコンをクリックして、ウィジェットスタイルを反転します。

  • アイコンをクリックして、ウィジェットスタイルを反転します。

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

• Content: 宝くじ画像カルーセルウィジェットのコンテンツ部分のスタイルを設定します。

  パラメーター	説明
  賞品	賞のスタイル。 レイアウトモード: 賞のレイアウトモード。 有効な値: 水平と垂直。 移動方向: 宝くじ中の賞品の移動方向。 有効な値: LeftおよびRight。 表示数量: カルーセルに表示される賞品の数。 デフォルト値 : 7 賞のサイズ: 賞の幅と高さを指定します。 単位: ピクセル。 賞品: 賞品のスタイルを指定します。 賞品を追加または削除するには、右側のまたはアイコンをクリックします。 またはアイコンをクリックして、複数の賞品の配置スタイルを設定します。 アイコンをクリックして、現在選択されている賞品設定をコピーし、同じ設定の賞品を追加します。 ID: 賞品のIDを指定します。 名前: 賞品の名前を入力します。 Image: 賞品のイメージ。 リモートサーバーで画像を使用するには、右上隅に画像のURLを入力します。 画像ボックスで [プレビュー] をクリックして、画像形式をプレビューします。 画像ボックスの下にある破線のボックスの [変更] をクリックします。 イメージデザインアセットを変更する方法の詳細については、「インターフェイスの使用」をご参照ください。 説明 データがデータパネルのデータフィールドに設定されている場合、データパネルのコンテンツが最初に表示されます。
  選択したエリア	描画領域のスタイルを設定します。 モード: 選択したエリアのモードを選択します。 [デバッグモード] または [通常モード] を選択できます。 位置: 描画領域の位置を選択します。 [頭] 、[中央] 、または [尾] を選択できます。 このパラメーターは、[カスタム位置] をオフにした場合にのみ設定できます。 カスタム位置: 選択したエリアの水平位置。 単位: ピクセル。 アイコンをクリックして、カスタム位置の表示を制御します。 Size: 幅と高さを含む領域のサイズ。 単位: ピクセル。 フィレット: 選択したエリアのフィレット値。 単位: ピクセル。 塗りつぶしの色: 描画領域の塗りつぶしの色。 枠: 線の種類、線の太さ、線の色など、選択した領域の枠のスタイル。
  描かれていない	賞品が描かれていないときのスタイルを設定します。 Identifier: 賞品が獲得されない場合の識別子を指定します。 名前: カスタム設定が選択されていない場合に表示される名前。 画像: 賞品が獲得されないときに使用される画像。 リモートサーバーで画像を使用するには、右上隅に画像のURLを入力します。 画像ボックスで [プレビュー] をクリックして、画像形式をプレビューします。 画像ボックスの下にある破線のボックスの [変更] をクリックします。 イメージデザインアセットを変更する方法の詳細については、「インターフェイスの使用」をご参照ください。 説明 賞が引かれない場合、データスロー値が設定されます。

• アニメーション: 宝くじ画像カルーセルのアニメーションスタイルを設定します。

  パラメーター	説明
  賞金スピード	賞品の各アイテムのローリングに費やされた時間をs単位で設定します。
  増分速度	各描画後にスピードインクリメンタルの値を設定するか、アニメーションをクリアするか、アニメーションを再起動すると、スピードが復元されます。 アイコンをクリックして増加速度を制御します。
  ミドルエリアアニメーション	中央領域アニメーションの再生モード。 有効性オプション: 修正とスクロール。 [スクロール] を選択すると、アニメーションのスクロール速度を設定できます。

• インタラクティブ: 宝くじ画像カルーセルウィジェットのボタンのスタイル。

  パラメーター	説明
  宝くじの難しさ	引き分けの難しさ。 有効性: Simple、Normal、Inferno。 説明 それは単に、エリアと賞の間に何らかの重複がある限り、それが抽選としてカウントされることを意味します。 一般は、エリアと赏品の间の1/3の重なりを指し、ドローがカウントされます。 地獄は、エリアと賞品が描かれる前に4/5重複している必要があることを意味します。
  ドローサスペンド	各宝くじの後に宝くじを一時停止する機能を設定するためにスイッチをオンにします。 スイッチをオフにして、宝くじを一時停止しないでください。

[データ] タブ

設定フィールドの説明

[インタラクション] タブ

描画: [有効にする] を選択して、ウィジェットインタラクション機能を有効にします。 抽選が行われると、データ要求がトリガされ、コールバック値がスローされ、抽選画像カルーセル内のデータが動的にロードされる。 デフォルトでは、id、title、urlの値が返されます。 詳細は、「コールバックIDの設定」をご参照ください。

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

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

2. 左上隅のアイコンをクリックします。

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

   • イベント

     イベント	説明
     宝くじ画像カルーセルインタフェース記述要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     宝くじ画像カルーセルインターフェースの説明リクエストが失敗した場合	データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ラッキードロー	抽選が行われると、描画されたデータのイベントが投入され、そのイベントに対応するオブジェクトタイプのデータ項目も投入される。 参照データの例は次のとおりです。 return { "id": "", // The ID of the prize. "title": "", // The name of the prize. "url": "" // The URL of the prize image. }

   • Action

     Action	説明
     リクエスト宝くじ画像カルーセルインタフェース説明	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、宝くじ画像カルーセルがhttps:// API. testとしてapiデータソースで構成され、要求宝くじ画像カルーセルインターフェイスに渡されたデータが { 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" } };