DataV:ラジオボックス

チャートスタイル

ラジオボックスは、ユーザーが選択したデータを処理のためにバックエンドに送信するために、視覚化アプリケーションでラジオ選択フォームとして使用できるコントロールウィジェットの一種です。 または、ユーザーが選択したコンテンツをインタラクティブな構成で他のコンポーネントに表示します。

設定パネル

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

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

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

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

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

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

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

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

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

• グローバルスタイル

  • フォント: テキストフォント。 デフォルトのフォントは Microsoft YaHei です。

    説明

    オペレーティングシステムに既にインストールされているフォントを選択します。 フォントがインストールされていない場合、デフォルトのフォントが表示されます。

  • オプションの幅: オプションの幅。

  • オプションの高さ: オプションの高さ。

  • オプション間の距離: オプション間の距離。

  • Spacing Within Option: ラジオボタンとテキストの間の距離。

  • デフォルトで選択: デフォルトで選択したオプションを選択します。

    説明

    デフォルトでは、選択されたコンテンツは、データ構成のvalue値内で選択する必要があります。

  • アーティキュレーションモード: ラジオボックスの配置モード。 有効な値: 垂直方向の配置と水平方向の配置。

• 通常のスタイル

  • テキストスタイル

    • 色: ラジオボックス内のテキストの色。 カラーピッカーの説明を参照して変更できます。

    • フォントスタイル: テキストのフォントスタイル。 ノーマル、イタリック、斜めを含む。

    • フォントの太さ: テキストのフォントの太さ。 ノーマル、大胆、大胆、ライターを含む。

    • フォントサイズ: テキストのフォントサイズ。

  • ボタン外円スタイル

    • ボーダースタイル

      • 枠の幅: ボタンの外側の枠の幅。

      • 枠の色: ボタンの外側の枠の色。

      • ボーダーフィレット: ボタンの外側の境界の丸い角。 有効な値は 0～360 です。 値が0の場合、ボタンの外側の境界は正方形です。 値が360の場合、ボタンの外側の境界は丸くなります。

      • ラインタイプ: 境界線のラインタイプ。 有効な値: 実線、点線、点線、二重実線、彫刻効果、エンボス効果、ピン効果、エンボス効果。

    • 背景色: ラジオボタンの背景色。

  • ボタン内部スタイル

    • ボーダーフィレット: ボタンの内側の境界線の丸い角。 有効な値は 0～360 です。 値が0の場合、ボタンの内側の境界は正方形になり、値が360の場合、ボタンの内側の境界は円形になります。

    • 背景色: ラジオボックスのボタンの背景色。

• 選択されたスタイル: 選択されているラジオボックスのスタイル。 詳細については、「共通スタイル」をご参照ください。

データパネル

value: ラジオボックスの各オプションに表示されるコンテンツ。

相互作用パネル

ウィジェットの操作機能を有効にするには、[現在の値の変更] の右側の [有効化] を選択します。 ラジオボックスのウィジェットにはインタラクティブな設定があります。 ラジオボックスで選択したオプションを変更し、データ要求をトリガーし、コールバック値を返すことができます。 その後、他のウィジェットで設定を構成できます。 デフォルトでは、データパネルで設定されたvalue値が返されます。 詳細は、「コールバックIDの設定」をご参照ください。

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

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

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

3. Blueprint Editorで、[ノードのインポート] ペインで [Radio Box] ウィジェットをクリックします。 次の図に示すように、キャンバス上でラジオボックスのパラメータを表示できます。

   • イベント

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

   • ポリシーアクション

     ポリシーアクション	説明
     リクエストAPIの説明	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、https:// api.testをAPIデータソースとして設定し、{ id: '1'} をRequest API Descriptionアクションに渡すデータとして設定した場合、最終的なリクエストインターフェイスは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" } };