グローバル変数を使用した動的ウィジェットの相互作用の実装 - DataV

このトピックでは、グローバル変数機能の使用方法を4つの例で示します。

前提条件

キャンバスエディターにいることを確認します。

例1: 日付によるクエリの実装

キャンバスにウィジェットを追加します。
1. キャンバスエディターで、上部の [検索] をクリックし、[一般タイトル] と [時間選択] を入力して、キャンバスに追加します。
2. をクリックしてキャンバスにウィジェットを追加します。
静的グローバル変数を設定します。
1. キャンバスエディターで、左側の [グローバル変数] タブを選択します。
2. [新しい変数] をクリックし、日付という名前を付け、日付値として記述し、初期値を2023-07-19に設定します。
General Titleウィジェットのデータソースを設定します。
1. [一般タイトル] ウィジェットを選択し、[データソース] タブに移動します。
2. データソースタイプをデータベースに設定し、既存のデータソースを選択します。次に、SQL入力ボックスに次のSQL文を入力します。
  説明
  注: グローバル変数を導入するには、コロンを使用します。詳細については、「参照ドキュメント」をご参照ください。
3. データの戻り結果と、グローバル変数に設定された初期値が表示される一般タイトルウィジェットの表示を確認します。
インタラクションのためにタイムピッカーウィジェットを設定します。
1. [時間選択] ウィジェットを選択し、[詳細設定] タブに移動します。
2. インタラクション発生スイッチを有効にし、timeフィールドのdate変数にリンクします。
  説明
  この構成は、時間選択が日付値を更新することを保証する。
設定をプレビューします。
キャンバスエディターの右上隅にある [プレビュー] をクリックして、設定をテストします。
説明
プレビューページには、最初にグローバル変数のデフォルト値が表示され、次にタイムピッカーのデフォルト値が表示されます。時間を変更すると、選択した時間値を反映するように一般タイトルが更新されます。
動的グローバル変数を設定します。
1. キャンバスエディターに戻り、グローバル変数の日付のソースをデータソースリクエストに変更します。
2. 作成したデータソースを選択し、クエリコードを入力して、SQLウィンドウで現在の時刻を取得します。
3. ```
select cast(curDate() as char) as date
```
4. 日付値を一般タイトルにインポートするフィルターを追加します。
```
return data[0].date;
```
5. フィルターの入力値と出力値を調べます。
6. 動的に取得された時間値が表示される一般タイトルウィジェットを観察します。
動的結果をプレビューします。
キャンバスエディターの右上隅にある [プレビュー] をクリックして、動的設定をテストします。
説明
プレビューページには、最初にグローバル変数の動的に取得された時間値が表示されます。時間を変更すると、選択した時間値を表示する一般タイトルが同期されます。

例2: データ配布の実装

キャンバスにウィジェットを追加します。
1. キャンバスエディターで、上部の [検索] をクリックし、[一般タイトル] と [ナンバーティッカーボード] と入力して、キャンバスに追加します。
2. をクリックしてキャンバスにウィジェットを追加します。
静的グローバル変数を設定します。
1. キャンバスエディターの左側で、[グローバル変数] タブを選択します。
2. [新しい変数] をクリックし、名前xを割り当てて、初期値を指定します。
```
[
  {
    "text": "我是文本",
    "number": 123
  }
]
```
ブループリントのインタラクションを設定します。
1. 左上隅のアイコンをクリックして、ブループリントエディターにアクセスします。
2. レイヤーとグローバル変数ノードをブループリントのメインキャンバスにドラッグします。
3. [ロジックノード] を選択し、2つのシリアルデータ処理ノードを追加します。
4. 図のようにノードを接続します。
5. シリアルデータ処理ノードの処理方法を定義します。
  - ナンバーティッカーボードの場合:
```
return [{
  value: data[0].number
}]
```
  - 一般的なタイトルの場合:
```
return [{
  value: data[0].text
}]
```
設定をプレビューします。
キャンバスエディターの右上隅にある [プレビュー] をクリックして、設定をテストします。

例3: 動的データ合計の実装

キャンバスにウィジェットを追加します。
1. キャンバスエディターで、上部の [検索] をクリックし、[番号表示] ボードと入力して、キャンバスに追加します。
2. をクリックしてキャンバスにウィジェットを追加します。
静的グローバル変数を設定します。
1. キャンバスエディターの左側で、[グローバル変数] タブを選択します。
2. [新しい変数] をクリックし、yとzという名前の2つのグローバル変数を作成します。初期値はそれぞれ123と234です。
ブループリントのインタラクションを設定します。
1. 左上隅のアイコンをクリックして、ブループリントエディターにアクセスします。
2. レイヤーとグローバル変数ノードをブループリントのメインキャンバスにドラッグします。
3. [ロジックノード] を選択し、2つのシリアルデータ処理ノードを追加します。
4. 図のようにノードを接続します。
5. シリアルデータ処理ノードの処理方法を定義します。
  - ノード1の場合:
```
return [{
  value: data + getCallbackValue(
    "z")
}]
```
  - ノード2の場合:
```
return [{
  value: data + getLocalValue(
    "y")
}]
```
設定をプレビューします。
キャンバスエディターの右上隅にある [プレビュー] をクリックして、設定をテストします。
動的グローバル変数を設定します。
グローバル変数yのソースを [データソース要求] に変更し、APIやデータベースなどの動的データソースを選択します。
ブループリントのインタラクションを設定します。
1. [ロジックノード] を選択し、タイマーを追加します。
2. Loopスイッチを有効にし、タイマーノードの遅延を3秒に設定します。
3. 図のようにノードを接続します。
動的結果をプレビューします。
キャンバスエディターの右上隅にある [プレビュー] をクリックして、結果を検証します。 Number Ticker Boardは3秒ごとに更新され、動的なデータの合計を示します。

例4: データスクリーニングの実装

キャンバスにウィジェットを追加します。
1. キャンバスエディターで、上部の [検索] をクリックし、[タブリスト] と [折れ線グラフ] を入力して、キャンバスに追加します。
2. をクリックして、タブリストとラインチャートのウィジェットをキャンバスに追加します。
3. [タブリスト] ウィジェットを選択し、[データソース] タブに移動します。
4. 静的データを変更します。
```
[
  {
    "id": 1,
    "content": "全部"
  },
  {
    "id": 2,
    "content": "类型A"
  },
  {
    "id": 3,
    "content": "类型B"
  }
]
```
静的グローバル変数を設定します。
1. [折れ線グラフ] ウィジェットを選択し、[データソース] タブに移動して、完全な静的データをコピーします。
2. キャンバスエディターで、左側の [グローバル変数] タブを選択します。
3. [新しい変数] をクリックし、dataという名前のグローバル変数を作成し、その初期値を折れ線グラフからコピーされた完全データに設定します。
ブループリントのインタラクションを設定します。
1. 左上隅のアイコンをクリックして、ブループリントエディターにアクセスします。
2. レイヤーノードをブループリントのメインキャンバスにドラッグします。
3. [ロジックノード] を選択し、シリアルデータ処理ノードを追加します。
4. 図のようにノードを接続します。
5. シリアルデータ処理ノードの処理方法を定義します。
```
let result = getCallbackValue("data") // Get global variable data
return result.filter(i => {
  if (data.content == "全部") {
    return result; // If the content of the tab list is "全部", return all data
  } else {
    return i.colorField == data.content; // If the content of the tab list is "类型A" or "类型B", return only the corresponding data
  }
});
```
設定をプレビューします。
キャンバスエディターの右上隅にある [プレビュー] をクリックして、設定をテストします。プレビューは、実際のデータスクリーニング機能を示します。