DataV:アイコン

チャートスタイル

アイコンはメディアコンポーネントの一種であり、さまざまな業界の視覚化アプリケーションに複数の種類のアイコン要素を追加できるため、視覚化アプリケーションをより美しく表示できます。

設定

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

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

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

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

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

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

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

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

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

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

  パラメーター	説明
  一般	[アイコンタイプ] の横にあるをクリックし、アイコンライブラリのドロップダウンリストからアイコンを選択します。 [アイコンタイプ] セクションのアイコンをクリックし、アイコンライブラリのドロップダウンリストからアイコンを選択します。 [アイコンタイプ] セクションでアイコンをクリックするか、[アイコンタイプ] アイコンの右側にあるテキスト領域をダブルクリックし、水平バーにアイコンの名前を入力して、アイコンライブラリで対応するアイコンを検索してアイコンを選択します。
  業種	[交通] 、[医療] 、[産業] [産業] のいずれかの設定項目をクリックします。 さまざまな業界設定項目のアイコンタイプを選択します。 アイコンタイプの選択方法の詳細については、「一般」をご参照ください。
  カスタム	DataVでカスタムアイコンを使用するには、[アイコンタイプ] フィールドにアイコンのUnicodeフォントファイルを入力します。 [全般] セクションの説明に従って、ドロップダウンリストから既存のアイコンリソースを選択することもできます。 説明 www.iconfont.cnでカスタムアイコンを作成し、アイコンプロジェクトで生成されたUnicodeフォントファイルをChart Typeの右側にあるカスタム入力ボックスにインポートして、DataVでカスタムアイコンを使用できます。

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

  カラー	アイコンの色。 詳細については、「カラーピッカーの説明」をご参照ください。
  マージン	アイコンとウィジェットの端の間の距離の割合。 単位: % 。 有効な値: -100から100。 設定値が小さいほど、アイコンが大きく表示されます。 値が特定の値より小さい場合、アイコンはウィジェットのアウトラインのサイズを超えます。 値が特定の値より大きい場合、アイコンは非常に小さくなり、消えます。

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

  パラメーター	説明
  背景色	アイコンの背景色。 詳細については、「カラーピッカーの説明」をご参照ください。
  背景フィレット	アイコンの背景ボックスの丸みを帯びた角のサイズ。 単位: ピクセル。 値が0の場合、丸みを帯びた角はなく、背景ボックスは正方形です。 設定値が大きいほど、背景ボックスの丸みを帯びた角のラジアン値が大きくなります。
  ボーダー厚さ	背景の境界線の太さ。
  ボーダータイプ	背景のボーダータイプ。 [実線] 、[破線] 、または [点線] を選択できます。
  ボーダーカラー	背景の境界線の色。 詳細については、「カラーピッカーの手順」をご参照ください。

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

[データ] タブ

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

インタラクティブパネル

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

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

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

3. Blueprint Editorで、[ノードのインポート] ペインで [アイコン] をクリックします。 キャンバスでは、次の図に示すように、アイコンのパラメーターを設定できます。

   • イベント

     イベント	説明
     クリックしたとき	アイコンがクリックされたときに発生するイベントと、アイコンに対応するデータ項目。
     マウスが入ったとき	マウスをアイコンの位置に移動したときに発生するイベントで、アイコンの対応するデータ項目も発生します。
     マウスを外したとき	アイコンに対応するデータ項目とともに、アイコンの位置からマウスが移動したときに発生するイベント。

   • Action

     Action	説明
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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" } };