進捗チャート付きテーブルの設定 - DataV

このトピックでは、進捗チャート付きテーブルの使用方法について説明します。

コンポーネントの概要

進捗チャート付きテーブルは、進捗チャートとテーブルを組み合わせたもので、各行がタスクを表し、各列がタスク名、進捗状況、期限などのさまざまなプロパティを表示します。進捗チャートは、長さ、パーセンテージ、色を通じてタスクの実行状況を視覚的に伝え、各タスクの現在の状況を明確に比較および理解できるようにします。プラットフォームでは、ハイパーリンクやカルーセルアニメーションを含むテーブルのコンテンツとスタイルをカスタマイズでき、編集や削除などの行ディメンションの操作をサポートしています。また、特定の行またはセルを選択するための条件付きフィルタリングも提供しています。

シナリオ

進捗チャート付きテーブルは、さまざまな指標にわたるタスクの実行状況または実行状況を迅速に評価するのに最適です。複数の従業員の進捗状況を表示できるため、作業進捗レポートに特に役立ちます。

効果表示

例：コンポーネントカルーセル表示。最初の行にはハイパーリンクがあり、「杭州」セルは条件付きコントロールで選択されています。

D69A1F86-3D2B-4E6E-921D-BB371D2CBE3E

前提条件

テンプレート、空白のキャンバス
ビジネスデータを使用する準備ができています。詳細については、「データソース」をご参照ください。

進捗チャート付きテーブルを追加する

DataV コンソールにアクセスします。
[ワークベンチ] > > [すべてのアプリケーション] > > [データダッシュボード] に移動し、目的のダッシュボードを選択してキャンバス編集ページにアクセスします。
左側ナビゲーションウィンドウの [コンポーネントライブラリ] > [テーブル] リストで、[進捗チャート付きテーブル] コンポーネントをクリックしてキャンバスに追加します。

グローバル検索を使用することで、関連コンポーネントを追加することもできます。

ビジネスデータを接続する

コンポーネントを追加した後、表示用に準備されたビジネスデータを接続します。進捗チャート付きテーブルをクリックし、右側の [データソース] タブで、コンポーネントのデータを選択します。

進捗チャート付きテーブルが受信するデータフィールドは次のとおりです。

フィールド	説明
カスタムパラメーター	テーブルのコンテンツは、複数のフィールド値でカスタマイズできます。これらは、[スタイル] > [テーブル列] > [列の構成] > [列フィールド名] と組み合わせて使用する必要があります。

進捗チャート付きサンプルテーブルのデータ構造は次のとおりです。

[
  {
    "id": 1,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01WlrRFN1NsIPslloOW_!!6000000001625-2-tps-180-108.png",
    "sales": 23,
    "proportion": 20,
    "city": "Beijing",
  },
  {
    "id": 2,
    "value": "https://img.alicdn.com/imgextra/i2/O1CN01Sh9r2s1FAJSLux0h0_!!6000000000446-2-tps-180-108.png",
    "sales": -34,
    "proportion": 45,
    "city": "Shanghai"
  },
  {
    "id": 3,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01vyRtik1JCq6bvTVwd_!!6000000000993-2-tps-180-108.png",
    "sales": 24,
    "proportion": 80,
    "city": "Hangzhou"
  },
  {
    "id": 4,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01WlrRFN1NsIPslloOW_!!6000000001625-2-tps-180-108.png",
    "sales": 80,
    "proportion": 20,
    "city": "Shenzhen"
  },
  {
    "id": 5,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01vyRtik1JCq6bvTVwd_!!6000000000993-2-tps-180-108.png",
    "sales": -31,
    "proportion": 45,
    "city": "Hefei"
  },
  {
    "id": 6,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01WlrRFN1NsIPslloOW_!!6000000001625-2-tps-180-108.png",
    "sales": 55,
    "proportion": 80,
    "city": "Chengdu"
  }
]

データソースの主な設定項目は次のとおりです。

設定項目	説明
データソースを選択	CSV ファイル、API、さまざまなデータベースなど、さまざまな種類のデータを統合できます。詳細については、「データソース」をご参照ください。視覚的なテーブルまたはコードを使用してデータフィールドを編集できます。
フィルターを構成する（オプション）	データ構造の変換、フィルタリング、表示、および簡単な計算を実現するために、フィルターコードをカスタマイズするために使用されます。詳細については、「データフィルターの管理」をご参照ください。
データマッピングを構成する	選択したデータソースのフィールドをウィジェットの対応するフィールドにマッピングして、リアルタイムのデータマッチングを実現するために使用されます。アイコンをクリックして、フィールドスタイルを構成します。
応答結果を表示	ウィジェットに統合されたデータをリアルタイムで表示するために使用されます。ウィジェットのデータソースが変更されると、最新のデータがここに表示されます。データ応答結果をクリックして、記述されたデータフィールドのコードを表示します。例をクリックして、データソースが受信した配列タイプとコード例を表示します。例を参照して、関連フィールドを記述できます。その他のデータリクエスト構成：読み込み状態を無効にする：選択すると、データダッシュボードを更新またはプレビューするときに、ウィジェットの初期化中の読み込みコンテンツは表示されません。制御モード：選択すると、ウィジェットは初期化状態でデータをリクエストしません。このとき、データリクエストは、ブループリントエディターまたはグローバル変数イベントを通じてのみ開始できます。自動更新リクエスト：選択すると、プラットフォームは、設定したポーリング時間に従ってデータを動的にポーリングおよび更新します。選択しない場合は、ページを手動で更新するか、ブループリントエディターとグローバル変数イベントを通じてリクエストをトリガーしてデータを更新する必要があります。

進捗チャート付きテーブルを構成する

進捗チャート付きテーブルコンポーネントをクリックして、基本スタイル、グローバル変数、インタラクション発生、および詳細設定、さらにブループリントインタラクション設定を右側のペインで構成します。

スタイル設定

[スタイル] パネルで、進捗チャート付きテーブルのテーブルの詳細、テキストフォント、背景色、カルーセルアニメーション、その他のスタイルを構成します。関連する設定項目について以下に紹介します。

説明

アイコンをクリックすると、キーワード検索を通じて設定項目をすばやく見つけることができます。あいまい一致をサポートしています。詳細については、「設定項目の検索」をご参照ください。

設定項目	説明	図
グローバル設定	データダッシュボードでのウィジェットの位置分布、透明度、およびインタラクションの透過性を定義します。不透明度：値が小さいほど、ウィジェットはより透明になります。値の範囲は `0～1` です。インタラクション透過：有効にすると、マウスはこのウィジェットを透過できます。ダッシュボードに多くのウィジェットがある場合、ウィジェットがマウスと下にあるウィジェット間のインタラクションをブロックするのを防ぎます。
テーブル設定	進捗チャート付きテーブルのカルーセル効果、テーブルコンテンツとテーブルヘッダースタイル、ホバースタイル、および序数列スタイルを定義します。 [カルーセル]：有効にすると、進捗チャート付きテーブルはアニメーションスタイルでカルーセルされます。カルーセル間隔時間、カルーセルモードなどを設定できます。全画面スクロールと1つずつスクロールの設定をサポートしています。全画面スクロールは、ページめくり効果と同様に、現在のページでカルーセルされます。 [1 ページあたりの行数]：進捗チャート付きテーブルで1ページあたりに表示される行数。テーブルコンテンツスタイル：進捗チャート付きテーブルのテキスト、背景、罫線、およびセルパディングスタイルの設定をサポートしています。主な説明は次のとおりです。テキストスタイル：テキストのフォント、色、フォントサイズ、および太さを設定します。基本スタイル：全体の背景色、行の高さ、コンテンツの配置、およびシマシマを有効にするかどうかを設定します。シマシマが有効になっている場合、奇数行の背景色はテーブルの背景色と同じで、偶数行の背景色は必要に応じて設定できます。説明ここでの配置は、進捗チャート付きテーブルのグローバルテキスト配置です。特定の列の配置を個別に設定する必要がある場合は、[テーブル列] 設定項目で設定できます。空のデータスタイル：テーブルに空のデータがある場合、ここで空のデータの表示スタイルをカスタマイズできます。デフォルトの表示スタイルは、青い背景にテキスト [データがありません] が表示されます。オーバーフローテキスト：オーバーフローテキストをスクロールして表示するかどうかを定義します。スクロール速度またはスクロール時間をカスタマイズできます。スクロールが有効になっていない場合、オーバーフローテキストは切り捨てられ、表示できません。 [テーブルヘッダー]：有効にすると、進捗チャート付きテーブルにテーブルヘッダーが追加されます。テーブルヘッダーのコンテンツの配置、テキストスタイル、ソート選択スタイル、罫線スタイル、背景の色、行の高さなどを設定できます。無効にすると、テーブルにテーブルヘッダーは表示されません。説明 [選択された並べ替えスタイル] は、進捗チャート付きテーブルコンポーネントのプレビューおよびリリース時に、テーブルヘッダーの列の並べ替えボタンをクリックしたときに表示される色を指します。このパラメーターは、[テーブル列の設定] で対応する列の [並べ替え] 機能が有効になっている場合にのみ有効です。 [ホバーハイライト]：プレビューまたはリリース状態でマウスを合わせたときに、進捗チャート付きテーブルの指定された行のテキストコンテンツがハイライト表示されるかどうかを設定します。次のハイライトスタイルを設定できます。テキストフォント、太さ、サイズ、色、その他のスタイル。行の背景色、影のオフセット角度、および影の色。 [序数列]：有効にすると、進捗チャート付きテーブルの左端に序数列が生成されます。必要に応じて構成できます。一般設定：列の名前、列の幅、テキストフォント、色、フォントサイズ、背景、その他のスタイルを設定できます。特殊項目：序数列の最初の N 行に特殊なコンテンツ（画像など）を表示する必要がある場合は、この設定を有効にできます。 [カスタムフィールド]：このパラメーターを有効にするには、ここで構成するコンテンツをデータソースの画像フィールドと一致させる必要があります。たとえば、データソースが `imgSrc: 'https://xxxx.png'` で構成されている場合は、ここで [imgsrc] として構成します。 [カスタム画像]：カスタム画像を使用します。対応する行に必要な画像リンクを必要に応じてアップロードしてください。動的画像を取得するには、データソースで画像関連のフィールドを構成する必要があります。説明データソースのカスタム画像フィールドコンテンツは、ここで構成された画像コンテンツよりも優先されます。またはアイコンをクリックして、画像データを追加または削除します。またはアイコンをクリックして、複数の画像データの配置スタイルを構成します。アイコンをクリックして、現在選択されている画像データをコピーします。
ページャー設定	ページャーは、通常、進捗チャート付きテーブルの下にあり、手動でページをめくるために使用されます。ここでは、ページャーのサイズ、表示されるページ数、テキストコンテンツ、余白、その他のスタイルを設定できます。ページャーの表示設定： [ページャーを非表示にする]：有効にすると、ページャーは非表示になります。 [単一ページを非表示にする]：有効にすると、進捗チャート付きテーブルにコンテンツが1ページしかない場合、ページャーは非表示になります。一般設定：ページャーのサイズ、位置、および表示スタイルを設定します。ページ番号スタイル設定： [ページ番号の数]：ページ数が多い場合にページャーに表示されるページ番号の数を定義します。中央のページ番号は省略記号 `...` に置き換えられます。 [入力ボックス]：有効にすると、ページ数が多い場合にページ番号を入力することで、指定したページにすばやくジャンプできます。ページ番号スタイル：さまざまな状態でのページ番号のテキストと背景色を定義します。 [カスタムテキスト]：ページャーの前のページと次のページの表示テキストを定義します。
テーブル列設定	進捗チャート付きテーブルの列コンテンツとスタイルを定義します。この設定項目は、複数の列を構成できる配列です（序数列を除く）。エディターは、カスタム列の構成を通じてデータを走査してレンダリングします。ここでの列の順序は、進捗チャート付きテーブルでの列の表示順序です。必要に応じて順序を調整できます。 [列スタイル]：フィールド名、表示名、列幅、ソート可能かどうかなど、さまざまなスタイルを定義できます。 [列フィールド名]：データソースのフィールド名から取得する必要があります。構成後、進捗チャート付きテーブルの列は、表示のためにデータソースの対応するフィールドのコンテンツを取得します。 [列表示名]：列のテーブルヘッダーコンテンツとして表示されます。 [列幅]：値が 0 の場合、列幅は適応的に調整されます。コンテンツ幅が列幅の設定値を超える場合は、この幅を使用してコンテンツが正しく表示されるようにすることができます。 [ソート]：有効にすると、現在の列のデータを昇順または降順にソートできます。列データが進捗チャートの場合、ソートはサポートされていません。 [テキストスタイル]：テキストのフォント、サイズ、色、その他のスタイルを設定できます。説明 [データ型] が [画像] の場合、このパラメーターは構成に含まれません。 [配置]：現在の列のコンテンツの配置を設定できます。 [データ型]：列データの型と表示スタイルを指定できます。型によって異なる設定項目が関係します。詳細は実際のインターフェイスを参照してください。数値型：数値の精度を設定できます。カテゴリ型：限られた数のカテゴリまたは分類を表すために使用されます。たとえば、都市（北京、上海など）。時間型：複数の形式を選択できます。通常は `YYYY/MM/DD HH:mm:ss` です。画像：画像の幅、高さ、および角丸スタイルを設定できます。トレンドチャート：特定の指標のトレンドを視覚的に表示するために使用されます。トレンドアイコン、さまざまなトレンドの色、指標表示スタイルなどを設定できます。指標設定：基準値と数値サフィックス（％など）を設定します。[基準値] は、この値を基準としてチャートのトレンドを計算することを示します。デフォルトは 0 です。データの初期値を基準値として使用することをお勧めします。 3 桁区切り記号：3 桁区切り記号。区切り文字は最大1文字です。1文字を超える場合は、最初の文字が使用されます。数値を区切り文字として使用することはできません。表示：準拠していないデータ型を表示するかどうかを制御します。有効にすると、データがトレンドチャートでサポートされているデータ型を満たしていなくても、データは進捗チャート付きテーブルに表示されます。進捗チャート：横棒グラフまたはリングチャートとして表示することを選択できます。データは通常、数値型です。数値の精度、サフィックス、色、フォント、その他のスタイルを設定できます。その他の操作：またはアイコンをクリックして、列を追加または削除します。またはアイコンをクリックして、カスタム列設定エリアの配置スタイルを変更します。アイコンをクリックして、現在選択されている列をコピーします。
詳細設定	進捗チャート付きテーブルに選択列、操作列、ハイパーリンク、仮想スクロールなどを追加するかどうかを定義します。 [選択列]：有効にすると、進捗チャート付きテーブルの左端に選択列が追加されます。ユーザーは必要に応じて指定された行をチェックして、さらなる操作を実行できます。デフォルトの選択：デフォルトで選択されている行を設定できます。英語のコンマ `,` で区切ります。この設定項目は、データソースの [id] フィールドと一致します。[id] に対応する [値] を入力してトリガーする必要があります。説明データソースに [id] フィールドがない場合、または [id] フィールドのコンテンツが空の場合、この設定項目は無効です。関連スタイル：ボタンのサイズ、背景色、および選択状態でのチェックマーク（√）の色とサイズを構成できます。 [操作列]：有効にすると、進捗チャート付きテーブルの右端に操作列が追加されます。ユーザーは、対応するスタイルと操作タイプ（編集、削除など）を必要に応じて構成できます。列スタイル：列表示名、列幅、および通常状態とホバー状態でのテキストとボタンのサイズと色を設定できます。列操作: 必要に応じて実行する操作タイプを定義できます。ボタンまたはテキストとして表示することをサポートしています。アイコンまたはアイコンをクリックして、操作を追加または削除します。アイコンまたはアイコンをクリックして、構成エリアで複数の操作の配置スタイルを変更します。アイコンをクリックして、現在選択されている操作項目をコピーします。ハイパーリンクの設定: 有効にすると、進捗チャート付きテーブルのデータソースで設定されたハイパーリンクが有効になります。ハイパーリンクフィールド名: ここで設定された名前は、[データソース] パネルで設定されたハイパーリンクフィールド（例: `link`）と一致する必要があります。テーブルの行にハイパーリンクを設定した後、行内の任意の場所をクリックすると、対応するリンクにジャンプします。データソースのコード例は次のとおりです。 `{ "link": "https://www.aliyun.com/" }` 新しいウィンドウで開く: 有効にすると、プレビューページまたはリリースページで対応するハイパーリンクをクリックすると、ブラウザに新しいウィンドウが開き、ジャンプリンクコンテンツが表示されます。有効になっていない場合、リンクコンテンツは現在のページに表示されます。 [仮想スクロール]: 有効にすると、マウスでスクロールして進捗チャート付きテーブルのコンテンツを表示できます。スクロールエリアの高さと罫線のスタイルを設定できます。この関数を使用する場合は、データの id 値が一意であることを確認してください。説明このパラメーターは、[カルーセル] 機能が無効になっている場合にのみ構成できます。
条件付き構成	進捗チャート付きテーブルで、条件を満たす特定のセルまたは行の選択を制御し、構成されたスタイルで表示できます。主な説明は次のとおりです。 [条件名]: 実行する条件の内容を構成します。たとえば、[市区町村] フィールドが杭州と等しいセルをフィルターで除外します。条件スタイルの構成の詳細については、「条件ツリーの使用手順」をご参照ください。 [選択範囲]: 構成された条件が満たされたときに選択される特定のセルまたは行全体を定義します。 [選択範囲] がセルとして構成されている場合、[カスタム表示列] が有効になっていると、カスタム列が配置されているセルがレンダリングされます。[列表示名] はデータソースのフィールドから取得する必要があります。 [データ型]: [進捗チャート] または [トレンドチャート] を選択できます。異なる型を選択した後、インターフェイスガイドに従って対応する型の色、フォント、その他のスタイルを構成できます。その他の操作: アイコンまたはアイコンをクリックして、条件スタイルを追加または削除します。アイコンまたはアイコンをクリックして、複数の条件の配置スタイルを構成します。アイコンをクリックして、現在選択されている条件スタイルをコピーします。

詳細設定

進捗チャート付きテーブルと他のコンポーネント間のインタラクションとデータ伝送の関係を定義します。関連する設定項目は次のとおりです。

設定項目

説明

図

インタラクションの発生

コンポーネント連携を実現するために、他のコンポーネントとのインタラクションの動作を定義します。アイコンをクリックして、関連するインタラクションの発生とインタラクションの操作を定義します。

グローバル変数の関連付け

コンポーネント内のグローバルパラメーターを関連付けて、コンポーネント間のパラメーター伝送を実現し、コンポーネントインタラクションを実行できます。アイコンをクリックして、対応する命令を有効にし、命令に必要なグローバル変数を関連付けます。

1 行をクリックした場合: 進捗チャート付きテーブルの行をクリックしたときにスローされる一時変数。デフォルトでは、データ内の id値sales比率city、、、、およびフィールドをスローします。
説明
このフィールドはデフォルトのサンプルフィールドです。具体的なフィールド名は、データをご参照ください。
[ページネーションのクリック時]: 進捗チャート付きテーブルのページネーションボタンがクリックされたときにスローされる一時変数。デフォルトでは、データ内のカスタム current フィールドがスローされます。
[ソート時にクリックする]: 進捗チャート付きテーブルのフィールドのソートボタンをクリックしたときにスローされる一時変数。デフォルトでは、データ内のカスタム columnName フィールドと order フィールドをスローします。
[複数選択をクリックした場合]: 進捗チャート付きテーブルで複数の行がオンになったときにスローされる一時変数。デフォルトでは、データ内のカスタム id、value、sales、proportion、および city フィールドをスローします。
[操作項目のクリック時]: 進捗チャート付きテーブルの操作列にある操作項目がクリックされたときにスローされる一時変数です。デフォルトでは、データ内のカスタム operateType フィールドと dataItem フィールドをスローします。

詳細については、「コンポーネントインタラクションの設定」をご参照ください。

ブループリントインタラクション

ブループリントエディタを使用して、コンポーネント間のインタラクション関係と動作ロジックを視覚的に定義します。

手順

キャンバス編集ページで、トップメニューバーの左側にあるアイコンをクリックして、ブループリントエディタに入ります。
レイヤーノードリストで、進捗チャート付きテーブルコンポーネントにカーソルを合わせてアイコンをクリックし、コンポーネントをメインキャンバスに追加します。
接続方法を使用して、必要に応じて関連コンポーネントのブループリントインタラクション効果を構成します。
例を次に示します。

構成項目紹介

関連する対話発生と操作を以下に紹介します。

説明

ブループリント構成インターフェイスの右側にあるイベントまたは操作の後のアイコンをクリックして、詳細なパラメーター紹介を表示します。

カテゴリ	サブカテゴリ	説明
イベント	データが更新されたとき	このイベントは、コンポーネントデータが更新されたときに発生します。
	データリクエストステータスが変更されたとき	このイベントは、データリクエストステータスが変更されたときに発生します。ステータス値には、Void、Loading、Success、Error が含まれます。
	単一行をクリックしたとき	このイベントは、進捗チャート付きテーブルの行がクリックされ、コンテンツがデータ応答結果とともに変更されたときに発生します。データの例は次のとおりです。 `{ "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "Beijing" }`
	ページネーションをクリックしたとき	このイベントは、進捗チャート付きテーブルのページネーションがクリックされ、現在のページのデータがスローされたときに発生します。データの例は次のとおりです。 `{ "current": 1 //ページャに表示されるページネーション番号。 }`
	ソートをクリックしたとき	このイベントは、進捗チャート付きテーブルのフィールドのソートボタンがクリックされ、現在のソートデータがスローされたときに発生します。データの例は次のとおりです。 `{ "columnName": "id", //ソートされているフィールド。 "order": "desc" //ソートの順序。desc は降順、asc は昇順を示します。 }`
	複数選択をクリックしたとき	このイベントは、進捗チャート付きテーブルの複数のデータ行がチェックされ、コンポーネントコンテンツがデータ応答結果とともに変更されたときに発生します。データの例は次のとおりです。 `{ "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "Beijing" }`
	操作項目をクリックしたとき	このイベントは、進捗チャート付きテーブルの操作列の操作項目がクリックされ、現在の操作項目データがスローされたときに発生します。データの例は次のとおりです。説明 `operateType` フィールド値は、[スタイル] > [詳細設定] > [操作列] > [列構成] の内容に対応しています。 `{ "operateType": "edit", "dataItem": { "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "Beijing" } }`
操作	データのインポート	コンポーネント描画フォーマットに従ってデータを処理した後、コンポーネントをインポートして再描画します。サーバー側のデータを再度リクエストする必要はありません。
	データのリクエスト	サーバー側のデータを再度リクエストします。入力データ処理ノードまたはレイヤーノードによってスローされたデータがパラメーターとして使用されます。たとえば、進捗チャート付きテーブルに構成された API データソースが `https://api.test` で、[データのリクエスト] 操作に渡されたデータが `{ id: '1'}` の場合、最終的なリクエストは `https://api.test?id=1` になります。
	ジャンプ先	コンポーネントページを特定のページにジャンプさせます。デフォルトでは 0 から始まります。データ例は次のとおりです。 `{ "current":3 //4 ページ目にジャンプすることを示します。 }`
	テーブル行のハイライト	テーブル行のどのデータをハイライト表示する必要があるかを設定し、対応するハイライトスタイルを設定します。データの例は次のとおりです。 `{ "data": { //ハイライト表示する必要があるデータ。 id:3, name:'Zhang San' }, "style": { //ハイライト表示されたデータのスタイル。 color:'#ff0', background:'#f00' } }`
	行のハイライトのキャンセル	テーブル行のハイライト効果をキャンセルします。
	ハイライトのクリア	パラメーターなしで、コンポーネントのすべてのハイライト効果をクリアします。
	選択列を開くと選択列を閉じる	パラメーターなしで、進捗チャート付きテーブルの選択列に対応するデータコンテンツを開いたり閉じたりします。
	操作列を開くと操作列を閉じる	パラメーターなしで、進捗チャート付きテーブルの操作列に対応するデータコンテンツを開いたり閉じたりします。
	選択値の設定	選択された列のパラメーターコンテンツを設定し、[値] に対応するデータソースの `id` フィールドを使用してトリガーします。データの例は次のとおりです。 `{ "value": 3 //id=3 の行を選択することを示します。 }`
	移動	ウィジェットを指定した位置に移動します。データの例は次のとおりです。 `{ // 移動方法。絶対配置: to、相対配置: by。デフォルト値: to。 "positionType": "to", // 指定位置。 x 座標、 y 座標。 "attr": { "x": 0, "y": 0 }, // アニメーション方法。 "animation": { "enable": false, // アニメーション遅延。 "animationDuration": 1000, // アニメーションカーブ。オプション値は、linear\|easeInOutQuad\|easeInOutExpo です。 "animationEasing": "linear" } }`
	表示の切り替え	ウィジェットを表示または非表示に切り替えます。データの例は次のとおりです。 `{ "animationType": "fade", "animationDuration": 1000, "animationEasing": "linear" }` animationType: アニメーション方法。appear（表示/非表示）、fade（フェードイン/フェードアウト）、slideToUp（フライイン/フライアウト）として構成できます。構成されていない場合は、アニメーションがないことを意味します。 animationDuration: アニメーション遅延、デフォルトは 1000 ミリ秒です。 animationEasing: アニメーションカーブ。linear（等速）、easeInOutQuad（スムーズ）、easeInOutExpo（低速-高速-低速）として構成できます。
	表示
	非表示
	コンポーネント構成の更新	ウィジェットのスタイル構成を動的に更新します。まず、ウィジェットの [スタイル] パネルで、[構成をクリップボードにコピー] をクリックして、ウィジェットの構成データを取得します。必要に応じて、ブループリントエディタ構成ページのデータ処理ノードで、対応するスタイルのフィールド値を変更します。