DataV:multi-select-ドロップダウンボックス

チャートスタイル

複数選択ドロップダウンボックスは、高度なウィジェットの一種です。 データダッシュボードのドロップダウンボックスフォームとして使用して、ユーザーが選択したデータを処理のためにバックエンドに送信したり、ユーザーが選択したコンテンツをインタラクティブな構成で他のウィジェットに表示したりできます。

スタイルパネル

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

  • Size: ウィジェットの幅と高さ。 単位: ピクセル。

  • ポジショニング: コンポーネントのx軸とy軸。 単位: ピクセル。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

  • 回転: ウィジェットはウィジェットの中心を中心に回転します。 単位は度で、

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

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

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

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

• 入力ボックス

  • デフォルトで選択: デフォルトで選択されているエントリ。 フィールドのエントリは、[データ] タブの値フィールドの既存のエントリである必要があります。 複数のエントリをコンマで区切ります (,) 。

  • 拡張機能: 次の表に、入力ボックスに追加される機能を示します。

    メトリクス	説明
    ドロップダウン検索	スイッチをオンにすると、入力ボックスにカスタム検索コンテンツを入力し、対応するドロップダウンリストでデータコンテンツを除外できます。 スイッチをオフにすると、カスタム入力検索コンテンツ機能は使用できません。
    選択をクリア	スイッチをオンにすると、[スタイルのクリア] 設定項目が入力ボックスモジュールに表示されます。 クリア矢印のサイズ、矢印の色、右の余白、矢印の背景色を設定できます。 スイッチをオフにすると、選択した設定項目をクリアする機能は使用できません。
    1ライン表示	スイッチをオンにすると、入力ボックス内のすべてのコンテンツが1行に表示されます。スイッチをオフにすると、コンテンツを複数行に表示できます。

  • 枠のスタイル: 入力ボックスの枠のスタイル。

    メトリクス	説明
    デフォルトの権限付与方法の使用	境界線の下のデフォルトの線の太さ、オプションの線のタイプ、線の色、および境界線フィレットの角度値。
    サスペンション	入力ボックスの境界線の上にポインターを移動すると、線の太さ、オプションの線の種類、線の色、および境界線のフィレットの角度の値を入力できます。
    選択済み	入力ボックスの境界線でマウスをクリックするとトリガーされ、入力ボックスの境界線の線の色の値が表示されます。 透明度0.2に設定されているホバーの色を選択することを推奨します。

  • コンテンツスタイル: 入力ボックス内のコンテンツのスタイル。

    メトリクス	説明
    テキストインデント	入力ボックスでのテキストインデントの設定。 単位: ピクセル。
    背景色	入力ボックスの背景色。 詳細については、「カラーピッカーの説明」をご参照ください。
    テキストスタイル	検索時に入力したテキストのスタイル、プロンプトテキストスタイル、およびドロップダウンリストが空の場合、テキストのコンテンツスタイル (フォントスタイル、テキストの太さ、フォントサイズ、テキストの色など) が表示されます。
    プロンプトテキスト	入力ボックスが空の場合のプロンプトテキストの内容。
    ラベル設定	背景色: タグの背景色。 Text: テキストのフォントスタイル、太さ、フォントサイズ、色など、入力ボックス内のラベルテキストのテキストスタイル。 境界線: 境界線の太さ、境界線のタイプ、境界線の色、および境界線の丸め値。 境界線タイプには、[実線] 、[破線] 、[点線] 、[二重実線] 、[彫刻効果] 、[エンボス効果] 、[ピン効果] 、[エンボス効果] があります。 Padded: タグの4つの内側の余白の値。 マージン: ラベルと境界線の外側の間の距離。 削除: 削除アイコンのサイズ、削除アイコンの色、および削除アイコンの右側までの距離。

  • 矢印スタイル: 入力ボックスの矢印スタイル。 アイコンをクリックして、矢印スタイルを指定できます。

    メトリクス	説明
    サイズ	ドロップダウン矢印のサイズ。
    カラー	ドロップダウン矢印の色。
    右マージン	ドロップダウンボックスの矢印とウィジェットの右枠の間の距離。 単位: ピクセル。

• ドロップダウンボックス

  • 高さ: ドロップダウンボックスの高さ。

    メトリクス	説明
    リストの高さ	ドロップダウンリストの高さ。 単位: ピクセル。
    オプションの高さ	ドロップダウンボックスの各オプションの高さ。 単位: ピクセル。

  • 背景: ドロップダウンボックスの背景色。

  • 境界線: ドロップダウンボックスの境界線のスタイル。

    メトリクス	説明
    厚さ	ドロップダウンボックスの境界線の太さ。
    型	ドロップダウンボックスの境界線の種類。 有効な値: 実線、点線、点線、二重実線、彫刻効果、エンボス効果、ピン効果、エンボス効果。
    カラー	ドロップダウンボックスの境界線の色。
    フィレ	ドロップダウンボックスの丸みを帯びた境界線のサイズ。 単位: ピクセル。

  • テキスト: ドロップダウンリストで選択したテキストのスタイル。

    メトリクス	説明
    フォント	ドロップダウンボックスで選択したテキストのフォントスタイル。
    テキストの重み	ドロップダウンボックス内のオプションテキストのフォントの太さの値。
    フォントサイズ	ドロップダウンボックス内のテキストフォントのサイズ。
    カラー	ドロップダウンボックス内のオプションテキストの色。

  • マージン: ドロップダウンリストのオプションの内容とオプションの境界線の間の距離。 単位: ピクセル。

  • アイコン設定: ドロップダウンリストのテキストの左側にあるアイコンの設定スタイル。 アイコンをクリックすると、アイコンの表示を制御できます。

    説明

    ドロップダウンリストの [アイコン設定] 設定項目は、データパネルのimgSrcフィールドと一致する必要があります。 既定では、サンプルデータソースパネルでは、最初のデータ項目のアイコンフィールドのみが設定されます。 他のオプションのアイコンを設定する必要がある場合は、対応するデータ項目のimgSrcフィールドをカスタマイズできます。

    メトリクス	説明
    幅	アイコンの幅。
    高さ	アイコンの高さ。
    距離テキスト間隔	アイコンとテキストの間の距離。

  • オプションホバースタイル

    メトリクス	説明
    背景情報	ドロップダウンボックスのオプションにマウスを移動したときの背景色。
    テキスト	ドロップダウンボックスのオプションの上にポインターを移動したときのテキストスタイル (フォントスタイル、テキストの太さ、フォントサイズ、テキストの色など) 。

  • スタイルの選択

    メトリクス	説明
    背景情報	ドロップダウンボックスのオプションにマウスを移動したときの背景色。
    テキスト	ドロップダウンボックスのオプションの上にポインターを移動したときのテキストスタイル (フォントスタイル、テキストの太さ、フォントサイズ、テキストの色など) 。
    色の選択	エントリが選択された後の候補ボックスの色。

[データソース] パネル

高度なパネル

スイッチをオンにして、関連するグローバル変数機能を有効にします。 ドロップダウンリストから項目を選択して、データ要求をトリガーしたり、一時変数をスローしたり、他のコンポーネントで使用したりできます。 デフォルトでは、データパネルで設定されたtitle、value、imgSrcの値がスローされます。 詳細については、「コンポーネント操作設定」をご参照ください。

Blueprintインタラクション

1. 左上隅のアイコンをクリックして、ブループリントページに移動します。

2. [レイヤーノード] タブで、ウィジェットをメインキャンバスに追加します。

3. ブループリント設定パラメーターを参照してください。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。
     ドロップダウンリストが選択されている場合	ドロップダウンボックスの内容が選択されたときに発生するイベントで、値に対応するデータ項目も発生します。 詳細については、データ例をご参照ください。 [ { "title": "Beijing", "value": "Beijing", "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" }, { "title": "Shanghai", "value": "Shanghai" }, { "title": "Guangzhou", "value": "Guangzhou" } ]

   • Action

     Action	説明
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 詳細については、データ例をご参照ください。 [ { "title": "Beijing", "value": "Beijing", "imgSrc": "https://img.alicdn.com/tfs/TB1jV1lcF67gK0jSZPfXXahhFXa-128-129.png" } ]
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに転送されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     選択したエントリの設定	現在のドロップダウンボックスで値を設定します。 詳細については、データ例をご参照ください。 { "value": "Shanghai" }
     選択したエントリのクリア	選択したドロップダウンボックスエントリの値をクリアします。 パラメータは必要ありません。
     コンポーネントをデフォルト値にクリア	コンポーネントをデフォルト値に戻します。 パラメータは必要ありません。
     移動	ウィジェットを指定した場所に移動します。 詳細については、データ例をご参照ください。 { // 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" } }
     スイッチ表示 /表示	ウィジェットを表示するか非表示にするかを切り替えます。 パラメータは必要ありません。
     表示	ウィジェットを表示します。 詳細については、「データ例」をご参照ください。 { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     非表示	コンポーネントを非表示にします。 詳細については、「データ例」をご参照ください。 { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 スタイルパネルで、[設定をクリップボードにコピー] をクリックしてウィジェットの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。