DataV:矢印描画

チャートスタイル

矢印プロットは、メディアウィジェットの一種です。 カスタムスタイルの矢印要素をビジュアルアプリケーションまたはビジュアルアプリケーションのモジュールに追加できます。

設定

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

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

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

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

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

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

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

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

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

• Line Style: 矢印プロットの線のスタイル。

  パラメーター	説明
  左高さスケール	ウィジェットの境界線の高さに対するウィジェットの左側の線の端の比率。 値の範囲は0から1です。 より大きい比率は、より低いライン端を示す。
  右の高さのスケール	ウィジェットの境界線の高さに対するウィジェットの右側の線の端の比率。 値の範囲は0から1です。 より大きい比率は、より低いライン端を示す。
  アークの厚さ	ラインアークの太さ。 有効な値: 0〜20。 単位: ピクセル。 値が大きいほど、アークは厚くなります。
  Linetype	ラインカーブのスタイル。
  エンドシェイプ	ライン内のエンドポイントの形状選択 (roundとbuttを含むオプション) 。
  点線	ラインの端点と端点の間のスペースの破線パターン。
  アニメーションの方向	線のアニメーション方向 (オプションで左と右) 。
  ドット付きスピード	点線の移動速度は、値の範囲は0と300の間にあり、値が大きいほど速度が速くなります。
  塗りつぶしの色	線の塗りつぶしの色。 詳細については、「カラーピッカーの手順」をご参照ください。

• 矢印スタイル: 矢印プロットの矢印のスタイル。

  パラメーター	説明
  左矢印を表示	左矢印スタイルを表示するにはスイッチをオンにします。左矢印スタイルを非表示にするにはスイッチをオフにします。
  右矢印を表示	スイッチをオンにすると、右矢印のスタイルが表示されます。 スイッチをオフにすると、右矢印のスタイルが非表示になります。
  幅	矢印の幅。 有効値: 0~100。 単位: ピクセル。 値が大きいほど、矢印の幅が大きくなります。
  高さ	矢印の高さ。 有効値: 0~100。 単位: ピクセル。 値が大きいほど、矢印の高さが大きくなります。
  塗りつぶしの色	矢印の塗りつぶしの色。 詳細については、「カラーピッカーの手順」をご参照ください。

• テキストスタイル: 矢印プロット内のテキストのスタイル。

  パラメーター	説明
  表示	スイッチをオンにしてテキストスタイルを表示し、スイッチをオフにしてテキストスタイルを非表示にします。
  テキストの位置	テキストの配置スタイル。 有効な値: Text AboveおよびText Below。
  テキストと行の間隔	テキストと行の間の平行距離。 有効値: 0~100。 単位: ピクセル。 値が大きいほど、分離距離は大きくなる。
  アニメーションの方向	テキストアニメーションが再生される方向。 有効な値: LeftおよびRight。
  アニメーション間隔	アニメーションを通じてテキストが再生される時刻。 有効な値: 0〜10。 単位は秒です。 数値が大きいほど、アニメーションが1ターン再生されるまでに時間がかかります。
  フォントサイズ	テキストのフォントサイズ。
  フォントの色	テキストのフォントの色。 詳細については、「カラーピッカーの手順」をご参照ください。
  フォントの重み	フォントの重み。
  フォント	フォントのスタイル。 デフォルト値はMicrosoft Yaheiです。

[データ] タブ

設定フィールドの説明

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

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

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

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

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

3. Blueprint Editorで、[追加ノード] ペインの [矢印プロット] ウィジェットをクリックします。 次の図に示すように、キャンバスでパラメーターを表示できます。

   • イベント

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

   • Action

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