このトピックでは、キャンバスエディタでのウィジェットの操作方法について説明します。ドラッグ、スケーリング、回転、ショートカットキーなどの基本的な機能に加えて、バッチ構成やカルーセルコンテナなどの高度な機能についても説明し、ダッシュボードでウィジェットをより効率的に操作できるようにします。
前提条件
ダッシュボードを作成済みであること。 テンプレートからダッシュボードを作成するか、空白のキャンバスからダッシュボードを作成することができます。
キャンバスエディタへのアクセス
DataV コンソールにアクセスします。
[ワークスペース] ページの [ダッシュボード] セクションで、対象のダッシュボードにカーソルを合わせて [編集] をクリックし、ダッシュボードのキャンバスエディタページにアクセスします。
このページでは、基本操作、バッチ構成、グループ操作、カルーセルコンテナの作成など、必要に応じてその他の操作を実行できます。
基本機能
操作 | 説明 |
ドラッグ | 左側の [ウィジェットライブラリ] から 1 つまたは複数のウィジェットを選択し、マウスの左ボタンを押したままドラッグします。
|
スケール | 1 つまたは複数のウィジェットを選択した後、マウスを境界ボックスの端に移動します。スケーリングアイコンが表示されたら、マウスの左ボタンを押したままドラッグします。 |
回転 | 1 つまたは複数のウィジェットを選択し、マウスをウィジェットの上端付近にある白い点に移動します。回転アイコンが表示されたら、マウスの左ボタンを押したままウィジェットを回転させます。 |
ウィジェットのロック | 詳細については、「レイヤー管理」をご参照ください。 |
ウィジェットレイヤーの位置移動 | ダッシュボードキャンバスまたはレイヤーパネルでウィジェットを右クリックします。ポップアップメニューで、[最前面に移動]、[最背面に移動]、[前面に移動]、[背面に移動] などの操作を実行します。 |
イテレータの生成 | 詳細については、「レイヤー管理」をご参照ください。 |
ブループリントエディタに入る | ブループリントエディタに入り、現在のウィジェットノードを直接見つけて、ローコード編集を通じて複雑なインタラクション効果を実装します。 |
ウィジェットの非表示 | 詳細については、「レイヤー管理」をご参照ください。 |
ウィジェットの名前変更 | 詳細については、「レイヤー管理」をご参照ください。 |
ID のコピー | 現在のウィジェット ID 値をコピーします。これは、キャンバスエディタとブループリントエディタでのクイック検索に使用できます。 |
ウィジェットのコピー | 詳細については、「レイヤー管理」をご参照ください。 |
ウィジェットの削除 | 詳細については、「レイヤー管理」をご参照ください。 |
ウィジェットのお気に入り | 詳細については、「レイヤー管理」をご参照ください。 |
サムネイル | DataV は、キャンバスの左下隅にサムネイル機能を提供しています。この機能を使用して、キャンバス上のウィジェットのレイアウトを調整できます。
|
ショートカットキー | キャンバスのショートカットキー
|
アイコンをクリックして、サムネイルのオンとオフを切り替えます。バッチ構成
操作 | 説明 |
バッチ構成 | 複数のウィジェットを選択した後、右側のパネルで次のバッチ構成を行うことができます。
|
グループ操作
操作 | 説明 |
グループ操作 |
説明 カルーセル機能が必要な場合は、[カルーセルコンテナを使用する] をクリックします。具体的な操作については、「カルーセルコンテナ」をご参照ください。 |
をクリックして、検索フィールドに見つけたい設定項目の名前を入力します。システムはあいまい一致をサポートしています。詳細については、「
アイコンをクリックすると、ウィジェットの幅と高さを比例的に調整できます。このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。
アイコンの黒い点をドラッグします。
アイコンをクリックして、ウィジェットを水平方向に反転させます。
アイコンをクリックして、ウィジェットを垂直方向に反転させます。
アイコンをクリックすると、グループの 3D 変換機能が有効になります。カルーセルコンテナ
カルーセルコンテナは、複数のウィジェットを固定領域にまとめて、スライドや反転などのさまざまなアニメーション効果を通じて動的に切り替えることができます。画面スペースが限られているが、大量のデータや情報を表示する必要がある場合は、カルーセルコンテナを使用できます。
カルーセルコンテナの作成
キャンバスエディタにアクセスし、カルーセルに含めるすべてのウィジェットを選択し、任意のウィジェットを右クリックして、[カルーセルコンテナを使用する] を選択してカルーセルコンテナを作成します。作成後、カルーセルコンテナ内のすべてのウィジェットは、カルーセル内で全体として表示されます。
1 つのダッシュボードに複数のカルーセルコンテナを作成できますが、各ウィジェットは 1 つのカルーセルコンテナにのみ追加できます。
カルーセルコンテナを使用する必要がなくなった場合は、カルーセルコンテナを右クリックして [カルーセルコンテナを削除] を選択します。削除後、カルーセルコンテナ内のウィジェットは独立した状態に戻ります。
カルーセルコンテナの設定
カルーセルコンテナをクリックして、右側のパネルで基本スタイル、インタラクションイベント、グローバル変数を設定します。
スタイル設定
[スタイル] パネルでは、カルーセルコンテナのアニメーション効果、背景色、カルーセル時間などを設定できます。関連する設定項目を以下に示します。
説明
アイコンをクリックして、キーワード検索で目的の設定項目をすばやく見つけることもできます。あいまい一致がサポートされています。詳細については、「設定項目の検索」をご参照ください。設定項目
説明
スクリーンショット
グローバル設定
データダッシュボードでのウィジェットの位置分布、透明度、インタラクションの透過性を定義します。
不透明度：値が小さいほど、ウィジェットはより透明になります。値の範囲は
0～1です。インタラクションの透過：有効にすると、マウスはこのウィジェットを透過できます。ダッシュボードに多くのウィジェットがある場合、ウィジェットがマウスと下にあるウィジェットとの間のインタラクションをブロックするのを防ぎます。
カルーセルスタイル設定
カルーセルのアニメーション効果を定義します。
クイックスタイル：カルーセルスタイルをすばやく切り替えます。スライド、フェードイン/アウト、反転などのさまざまなスタイルをサポートしています。
アニメーション設定：カルーセルスタイル、カルーセルコンテナ内のウィジェットの配置（水平または垂直）、カルーセル時間（ミリ秒単位）を設定します。
基本スタイル設定
カルーセルコンテナの背景、パディングとマージン、表示数、カルーセル数、ウィジェット間隔、カルーセル方向、センタリング効果、シャドウ効果を定義します。主な説明は次のとおりです。
背景：背景の 色 の変更、またはローカル画像を背景としてアップロードすることをサポートしています。
パディングとマージン：カルーセルコンテナに現在表示されているウィジェットと 4 つの境界線（上、下、左、右）との間の距離を設定します。
表示数：カルーセルコンテナで同時に表示できるウィジェットの数。
説明これは、カルーセルスタイルが スライド または ショーケース として設定されている場合にのみ有効になります。
カルーセル数：各カルーセル内のウィジェットの数。
説明これは通常、表示数 が 1 より大きい場合に使用され、カルーセルスタイルが スライド または ショーケース として設定されている場合にのみ有効になります。
間隔：カルーセルコンテナ内の 2 つのウィジェット間の距離。
説明これは、カルーセルスタイルが スライド または ショーケース として設定されている場合にのみ有効になります。
自動再生と視差効果
自動再生と視差効果の表示を定義します。
遅延：自動再生中の 2 つのトランジションアニメーションの間隔（ウィジェットの表示時間と見なすことができます）をミリ秒単位で設定します。
ホバー時に一時停止：有効にすると、マウスがカルーセルコンテナにホバーしたときに自動再生が一時停止します。
視差効果：カルーセルコンテナ内のウィジェットの透明度と、カルーセルコンテナに対するウィジェットのスケーリング比率を設定します。
その他
対応するボタンをクリックして、カルーセルコンテナをすばやく開始、一時停止、またはキャンセル（カルーセルコンテナの削除）します。
詳細設定
[詳細設定] パネルでは、カルーセルコンテナと他のウィジェット間のインタラクションとデータ転送の関係を定義できます。関連する設定項目を以下に示します。
設定項目
説明
スクリーンショット
インタラクションイベント
他のウィジェットとの インタラクション設定 を定義して、ウィジェットの連携を実現します。
アイコンをクリックして、関連するインタラクションイベントとアクションを定義します。
グローバル変数
カルーセルコンテナ内のグローバルパラメータを関連付けて、ウィジェットインタラクションのためのウィジェット間のパラメータ転送を実現できます。
アイコンをクリックして、対応する命令を有効にし、その命令に必要な グローバル変数 を関連付けます。 カルーセルからページへ の場合、一時変数がスローされます。デフォルトでは、カルーセルコンテナの indexフィールド値がスローされます。