すべてのプロダクト
Search

このプロダクト

    DataV:アイコン

    ドキュメントセンター

    DataV:アイコン

    最終更新日:Feb 07, 2025

    このトピックでは、すべてのアイコンを選択したときの各設定項目の意味について説明します。

    チャートスタイル

    アイコンは、メディアウィジェットの一種です。 さまざまな業界のデータダッシュボードに複数の種類のアイコン要素を追加して、データダッシュボードの表示をより美しくすることができます。 image.png

    スタイルパネル image.png

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

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

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

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

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

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

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

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

    • アイコンリソース: アイコンリソースのタイプ。 [一般] 、[業界] 、または [カスタム] を選択できます。

      メトリクス

      説明

      一般的なテスト項目

      • [アイコンタイプ] の横にある下拉框选择按键をクリックし、アイコンライブラリのドロップダウンリストからアイコンを選択します。

      • [アイコンタイプ] セクションのアイコンをクリックし、アイコンライブラリのドロップダウンリストからアイコンを選択します。

      • [アイコンタイプ] セクションでアイコンをクリックするか、[アイコンタイプ] アイコンの右側にあるテキスト領域をダブルクリックし、水平バーにアイコンの名前を入力して、アイコンライブラリで対応するアイコンを検索してアイコンを選択します。

      産業

      [交通] 、[医療] 、[産業] [産業] のいずれかの設定項目をクリックします。 さまざまな業界設定項目のアイコンタイプを選択します。 アイコンタイプの選択方法の詳細については、「一般」をご参照ください。

      ユーザー定義

      DataVでカスタムアイコンを使用するには、[アイコンタイプ] フィールドにアイコンのUnicodeフォントファイルを入力します。 [全般] セクションの説明に従って、ドロップダウンリストから既存のアイコンリソースを選択することもできます。

    • アイコンスタイル: アイコンのスタイル。

      カラー

      アイコンの色。 詳細については、「カラーピッカーの説明」をご参照ください。

      マージン

      アイコンとウィジェットの端の間の距離の割合。 単位: % 。 有効な値: -100から100。 設定値が小さいほど、アイコンが大きく表示されます。 値が特定の値より小さい場合、アイコンはウィジェットのアウトラインのサイズを超えます。 値が特定の値より大きい場合、アイコンは非常に小さくなり、消えます。

    • 背景スタイル: アイコンの背景スタイル。 アイコンをクリックし眼睛图标て背景を表示します。

      メトリクス

      説明

      背景色

      アイコンの背景色。 詳細については、「カラーピッカーの説明」をご参照ください。

      背景フィレット

      アイコンの背景ボックスの丸みを帯びた角のサイズ。 単位: ピクセル。 値が0の場合、丸みを帯びた角はなく、背景ボックスは正方形です。 設定値が大きいほど、背景ボックスの丸みを帯びた角のラジアン値が大きくなります。

      ボーダー厚さ

      背景の境界線の太さ。

      ボーダータイプ

      背景のボーダータイプ。 有効な値: Solid、Dashed、Dotted。

      ボーダーカラー

      背景の境界線の色。 詳細については、「カラーピッカーの手順」をご参照ください。

    • アニメーションの回転: スイッチをオンにすると、アイコンは中心点を中心に時計回りに回転します。 スイッチをオフにすると、アイコンは回転できません。

    • ハイパーリンク設定: アイコンをクリックすると、指定したハイパーリンクに移動できます。 新しいウィンドウでハイパーリンクを開くこともできます。

    • ジェスチャーカーソル: アイコンのジェスチャーカーソルを設定します。 アイコンをクリックし眼睛图标て、カーソルを表示または非表示にします。

    [データソース] パネル

    このコンポーネントは構成データを必要としません。

    高度なパネル image.png

    相互作用の発生

    説明

    クリックしたとき

    スイッチをオンにして、ウィジェットの操作機能を有効にします。 アイコンがクリックされると、データ要求がトリガーされ、一時変数がスローされ、現在のアイコンのデータが動的にロードされます。 デフォルトでは、データ内のurlとtypeの値がスローされます。 詳細については、「コンポーネント操作設定」をご参照ください。

    マウスが入ったとき

    スイッチをオンにして、ウィジェットの操作機能を有効にします。 マウスがアイコンの位置に移動すると、データ要求がトリガーされ、一時変数がスローされ、現在のアイコンのデータが動的にロードされます。 デフォルトでは、データ内のurlとtypeの値がスローされます。 詳細については、「コンポーネント操作設定」をご参照ください。

    マウスを外したとき

    スイッチをオンにして、ウィジェットの操作機能を有効にします。 マウスがアイコン位置から離れると、データ要求がトリガーされ、一時変数がスローされて現在のアイコンのデータが動的にロードされます。 デフォルトでは、データ内のurlとtypeの値がスローされます。 詳細については、「コンポーネント操作設定」をご参照ください。

    Blueprintインタラクション

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

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

    3. ブループリント設定パラメータを表示します。 image.png

      • イベント

        イベント

        説明

        クリックしたとき

        アイコンがクリックされたときに発生するイベントと、アイコンに対応するデータ項目。

        マウスが入ったとき

        マウスをアイコンの位置に移動したときに発生するイベントで、アイコンの対応するデータ項目も発生します。

        マウスを外したとき

        アイコンに対応するデータ項目とともに、アイコンの位置からマウスが移動したときに発生するイベント。

      • Action

        Action

        説明

        リクエストAPIの説明

        このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。

        インポートインターフェイスの説明

        ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。

        移動

        ウィジェットを指定した場所に移動します。 詳細については、データ例をご参照ください。 

            {
      // 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でデータ処理ノードのスタイルフィールドを変更します。