グローバル変数機能のデモ - DataV - Alibaba Cloud ドキュメントセンター

前提条件

キャンバスエディターを開いていること。

例 1：日付によるクエリ

ウィジェットを追加します。
1. キャンバスエディターの上部で[検索]をクリックし、[一般タイトル]と[タイムピッカー]を入力します。
2. ウィジェットをクリックして、キャンバスに追加します。
静的グローバル変数を設定します。
1. キャンバスエディターの左側にあるナビゲーションペインで、[グローバル変数] タブを選択します。
2. [新しい変数] をクリックします。変数を date に名前変更し、説明に Date value を入力し、初期値を 2023-07-19 に設定します。
汎用タイトルウィジェットのデータソースを設定します。
1. [一般タイトル] ウィジェットを選択し、次に [データソース] タブを選択します。
2. データソースタイプを Database に設定し、既存のデータソースを選択して、次の SQL ステートメントを入力します。
  
  説明
  グローバル変数を参照するには、コロン (:) を使用する必要があります。詳細については、「グローバル変数のオートコンプリート」をご参照ください。
3. 汎用タイトルウィジェットには、グローバル変数の初期値が表示されます。
タイムピッカーのインタラクションを設定します。
1. [タイムピッカー] ウィジェットを選択し、次に [詳細] タブを選択します。
2. 「インタラクション発生」スイッチをオンにします。[時間] フィールドに、date 変数を選択します。
  
  説明
  時刻を選択すると、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": "I am text",
    "number": 123
  }
]
```
ブループリントのインタラクションを設定します。
1. 左上隅にあるアイコンをクリックして、ブループリントエディターを開きます。
2. レイヤーノードとグローバル変数ノードをメインブループリントキャンバスにドラッグします。
3. [ロジックノード] をクリックし、2 つのシリアルデータ処理ノードを追加します。
4. ノードを接続します。
5. シリアルデータ処理ノードの処理方法を設定します。
  - ティッカーボード
```
return [{
  value: data[0].number
}]
```
  - 汎用タイトル
```
return [{
  value: data[0].text
}]
```
結果をプレビューします。

[Preview]キャンバスエディターの右上隅にあるをクリックして、設定を確認します。

例 3：動的データ集計の実装

ウィジェットを追加します。
1. キャンバスエディターの上部で、[検索]をクリックし、次に [Ticker Board]と入力します。
2. ウィジェットをクリックして、キャンバスに追加します。
静的グローバル変数を設定します。
1. キャンバスエディターの左側にあるナビゲーションペインで、[グローバル変数] タブを選択します。
2. [新しい変数]をクリックします。2 つのグローバル変数を作成します。それらの名前を y と z に変更し、初期値をそれぞれ 123 と 234 に設定します。
ブループリントのインタラクションを設定します。
1. 左上隅にあるアイコンをクリックして、ブループリントエディターを開きます。
2. レイヤーノードとグローバル変数ノードをメインブループリントキャンバスにドラッグします。
3. [ロジックノード] をクリックし、2 つのシリアルデータ処理ノードを追加します。
4. ノードを接続します。
5. シリアルデータ処理ノードの処理方法を設定します。
  - ノード 1
```
return [{
  value: data + getCallbackValue(
    "z")
}]
```
  - ノード 2
```
return [{
  value: data + getLocalValue(
    "y")
}]
```
結果をプレビューします。

キャンバスエディターの右上隅で、[プレビュー] をクリックして設定を確認します。
動的グローバル変数を設定します。

グローバル変数 y のソースを [データソースリクエスト] に変更し、API やデータベースなどの動的データソースを選択します。
ブループリントのインタラクションを設定します。
1. [ロジックノード] をクリックし、[タイマー] を追加します。
2. [ループ] スイッチをオンにして、タイマーノードの遅延を 3 秒に設定します。
3. ノードを接続します。
結果をプレビューします。

キャンバスエディターの右上隅で、[プレビュー] をクリックして結果を確認します。ティッカーボードは 3 秒ごとに更新され、動的なデータ集計を反映します。

例 4：データフィルタリングの実装

ウィジェットを追加します。
1. キャンバスエディターの上部で [検索] をクリックし、[タブリスト] と [折れ線グラフ] を入力します。
2. ウィジェットをクリックして、キャンバスに追加します。
3. [タブリスト] ウィジェットを選択し、次に [データソース] タブを選択します。
4. 静的データを変更します。
```
[
  {
    "id": 1,
    "content": "All"
  },
  {
    "id": 2,
    "content": "Type A"
  },
  {
    "id": 3,
    "content": "Type B"
  }
]
```
静的グローバル変数を設定します。
1. [折れ線グラフ] ウィジェットを選択し、[データソース] タブを選択し、すべての静的データをコピーします。
2. キャンバスエディターの左側にあるナビゲーションペインで、[グローバル変数] タブを選択します。
3. [新規変数] をクリックします。グローバル変数を作成し、名前を data に変更して、初期値をコピーした完全な折れ線グラフのデータに設定します。
ブループリントのインタラクションを設定します。
1. 左上隅にあるアイコンをクリックして、ブループリントエディターを開きます。
2. レイヤーノードとグローバル変数ノードをメインブループリントキャンバスにドラッグします。
3. [ロジックノード] をクリックし、シリアルデータ処理ノードを 1 つ追加します。
4. ノードを接続します。
5. シリアルデータ処理ノードの処理方法を設定します。
```
let result = getCallbackValue("data") // グローバル変数 data を取得します。
return result.filter(i => {
  if (data.content == "All") {
    return result; // タブリストのコンテンツが "All" の場合、すべてのデータを返します。
  } else {
    return i.colorField == data.content; // タブリストのコンテンツが "Type A" または "Type B" の場合、対応するデータのみを返します。
  }
});
```
結果をプレビューします。

キャンバスエディターの右上隅で、[プレビュー] をクリックして設定を確認します。

前提条件

例 1： 日付によるクエリ

例 2： データ配信の実装

例 3： 動的データ集計の実装

例 4： データフィルタリングの実装

例 1：日付によるクエリ

例 2：データ配信の実装

例 3：動的データ集計の実装

例 4：データフィルタリングの実装