DataV:リストカルーセル

チャートスタイル

カルーセルリストはテーブルウィジェットの一種です。 各行と列のスタイルとコンテンツのカスタム設定、リストコンテンツのハイパーリンク設定、および画像形式のリストコンテンツをサポートします。 カルーセルアニメーションを使用して、ビジュアルアプリケーションのリストにデータ情報を明確に表示できます。

設定パネル

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

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

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

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

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

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

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

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

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

• グローバル

  • Table Rows: カルーセルテーブルの行数。

  • カルーセル: スイッチをオンにすると、プレビューページまたはリリースページのコンテンツが自動的にキャプチャされます。 スイッチをオフにすると、アニメーションスタイルを設定できません。

  • フォント: ウィジェット内のすべてのテキストのフォント。 デフォルト値: Microsoft Yahei

  • アニメーション: この機能は、カルーセル設定項目をオンにした場合にのみ有効になります。

    パラメーター	説明
    アニメーションモード	カルーセルアニメーションのモード。 [すべてスクロール] または [1つずつスクロール] を選択できます。
    カルーセル間隔 (秒)	カルーセル間隔の時間。 単位は秒です。
    シングルページなしカルーセル	スイッチをオンにします。 データの行数がテーブルの行数に達しない場合 (データの1ページのみ) 、カルーセルは実行されません。

  • ハイライト: カルーセルテーブルの1行のハイライトスタイル。 アイコンをクリックして、ハイライトスタイルを制御できます。

    パラメーター	説明
    オートハイライト	スイッチをオンにすると、カルーセルリストの各行が自動的に順番に強調表示されます。 スイッチをオフにすると、ハイライトする行を指定できます。
    ハイライトシーケンス番号の指定	カルーセルリストに行のシリアル番号を入力します。 リスト内の行の内容を強調表示するように指定できます。 この機能は、設定項目の自動強調表示が無効になっている場合にのみ有効です。
    ハイライトスタイル	カルーセルテーブル内のハイライトされた行のスタイル。 テキストスタイル: リスト内で強調表示されている行のテキストスタイル (フォントスタイル、太さ、フォントサイズ、行のテキストの色など) 。 背景色: リスト内のハイライトされた行の背景色。 枠線: リスト内の強調表示された行の枠線のスタイル (枠線の太さ、枠線の種類、枠の色など) 。 説明 境界線の色がグラデーションの場合、境界線の種類は無効です。

  • Null値の行を非表示: スイッチをオンにすると、データの内容が空の場合、行は自動的に非表示になります。

  • オーバーフローテキストスクロール

    パラメーター	説明
    スクロール	スイッチをオンにすると、プレビューページまたは公開ページでオーバーフローテキストを自動的にスクロールできます。
    均一圧延	スイッチをオンにすると、プレビューページまたは公開ページのオーバーフローテキストを一定の速度でスクロールできます。
    レート	システムが一定の速度で回転する速度。 単位: px/s。 これは、定速スクロールの設定項目がオンになっている場合にのみ設定できます。
    ローリングタイム (秒)	オーバーフローテキストのスクロール時間。 単位は秒です。 定速圧延の設定項目がオフになっている場合にのみ設定できます。

  • 即時更新: スイッチをオンにすると、データが更新されるとすぐにビューが更新されます。 スイッチをオフにすると、ビューは次のカルーセルで更新されます。

  • デフォルトイメージ: カスタム列のコンテンツタイプが [イメージ] に設定されている場合に表示されるデフォルトイメージ。

    説明

    デフォルトの画像形式は、png、jpg、gif、またはjpegです。

• ヘッダー: リストのヘッダースタイル。 アイコンをクリックすると、ヘッダースタイルを表示するか非表示にするかを制御できます。

  パラメーター	説明
  ヘッダー行の高さ (%)	チャート全体の高さに対するヘッダーの比率。 有効値: 0~100。 単位: % 。
  背景色	ヘッダーの背景色は、カラーピッカーの説明を参照して変更してください。
  テキストスタイル	テーブルヘッダー内のテキストのスタイル。 テキストの配置: 配置モード。 有効な値: Left、Center、およびRight。 フォント: テキストフォント。 デフォルトのフォントは Microsoft YaHei です。 フォントの色: テキストの色。 フォントサイズ: テキストのサイズ。 有効値は 0 ～ 200 です。 フォントの太さ: テキストのフォントの太さ。

• 行設定

  パラメーター	説明
  奇数列の背景色	リスト内の奇数行の背景色。
  行の背景色	リスト内の偶数行の背景色。
  Callbackフィールド	コールバックパラメーターとして使用されるフィールド。 データからフィールドを取得する必要があります。

• シリアル番号: リスト内のシリアル番号のタイプ。 アイコンをクリックすると、シリアル番号を表示または非表示にできます。

  パラメーター	説明
  背景色	シリアル番号の背景色。
  コラムの幅の比率 (%)	シリアル番号が存在する列の幅。 値は列幅のパーセンテージです。 有効値: 0~100。 単位: % 。
  半径割合 (%)	シリアル番号の半径。 値は、シリアル番号が存在する列の幅のパーセンテージです。 有効値: 0~100。 単位: % 。
  テキストスタイル	フォントスタイル、色、フォントサイズ、フォントの太さなど、シリアル番号テキストのテキストスタイル。

• カスタム列: またはアイコンをクリックして、ラベル列を追加または削除します。 またはアイコンをクリックして、複数のカスタムシリーズの配置スタイルを設定します。 アイコンをクリックして、選択したタグシリーズ設定をコピーし、同じ設定のタグシリーズを追加します。

  説明

  この設定項目は、複数のカスタム列で設定できる配列です。 エディタは、データが1つ以上のカスタム列構成を通じて周期的にレンダリングされるように、データをトラバースする。 一部のデータを特定のスタイルにカスタマイズする必要がある場合は、データを手動でソートする必要があります。

  パラメーター	説明
  列フィールド名	カスタム列の名前。データのtypeフィールドに対応する必要があります。
  列の表示名	カスタム列の表示名。テーブルヘッダーのコンテンツとして表示されます。
  コラムの幅の比率 (%)	リストの幅に対するカスタム列の割合。 有効値: 0~100。 単位: % 。 全ての列幅の割合の合計は100% である。 合計が値を超えると、入力した値から逸脱します。
  コンテンツタイプ	カスタム列のコンテンツタイプ。 有効な値: TextおよびImage。 説明 [コンテンツタイプ] パラメーターを [イメージ] に設定した場合、列名のコンテンツが実際のイメージのURLであることを確認します。
  画像幅	カスタム列内の画像の幅。 単位: ピクセル。 このパラメーターは、[画像] 設定項目 [コンテンツタイプ] パラメーターを選択した後にのみ使用できます。
  画像マージン	カスタム列のイメージマージン値。 画像とカスタム列の左側およびカスタム列の上部との間の距離を指定できます。 単位: ピクセル。 このパラメーターは、[コンテンツタイプ] 設定項目から [画像] を選択した後にのみ使用できます。
  有効	スイッチをオンにすると、カスタム列の内容が自動的にラップされます。 テキストが選択されている場合にのみ設定可能コンテンツタイプ。
  テキスト配置	カスタム列のテキスト配置。 値: 左揃え、中央揃え、右揃え。 テキストが選択されている場合にのみ設定可能コンテンツタイプ。
  テキストスタイル	カスタム列のテキストスタイル。 このパラメーターは、[テキスト] 設定項目 [コンテンツタイプ] パラメーターを選択した後にのみ使用できます。 フォント: 列内のテキストのフォントスタイル。 デフォルト値はMicrosoft Blackです。 フォントの太さ: 列のフォントの太さ。 フォントサイズ: カスタム列のテキストのサイズ。 有効値は 0 ～ 200 です。 色: 列内のテキストの色。

データパネル

設定するフィールドは、[設定] タブの [カスタム列] の [列名] 設定項目のフィールドに対応している必要があります。 ハイパーリンクを実装するには、フィールドの内容をラベルに設定します。

相互作用パネル

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

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

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

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

   • イベント

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

   • ポリシーアクション

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ハイライト	カルーセルリストのデータ行を強調表示します。 参照データの例を次に示します。 return { "isOrder": true、 "hightLightIndex": "1" 、 "hightLightStyle": { "color": "#f00" 、 "borderColor": "#f00" 、 "borderWidth": 1、 "backgroundColor": "yellow" 、 "fontSize": 12、 "fontWeight": "normal", "fontFamily": "Microsoft Yahei" } }
     スクロールをオンにする	カルーセルのスクロールを開始します。 動きの入力データは、オブジェクトタイプである。 例： return { "isLoop": true // カルーセルするかどうかを指定します。 デフォルト値：true }
     一時停止スクロール	スクロールを一時停止し、パラメータは必要ありません。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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" } };