DataV:ウィジェットの操作設定

[コントロール] > [選択] カテゴリから [列グラフ] ウィジェットと [タブリスト] ウィジェットをキャンバスに追加します。

タブリストウィジェットを選択し、データソースを更新し、タブを「表示」および「非表示」に設定します。

最初のタブがクリックされたときに、タブリストのインタラクションイベントを設定して、縦棒グラフを表示します。

1. タブリストを選択し、右側の [詳細] パネルに移動し、[インタラクションイベント] アイコンをクリックして、タブクリック用のインタラクションイベントを追加します。 Enable Eventスイッチはデフォルトで有効になっています。

2. [イベントタイプ] を選択し、[タブがクリックされたとき] イベントを追加します。

   説明

   現在のイベントの応答パラメーターの説明を表示するには、アイコンをクリックします。

3. アイコンをクリックして、アクショントリガー条件スイッチを有効にします。

4. [条件の追加] をクリックして条件id=1を設定し、最初のタブがクリックされたことを示します。 詳細な手順については、「条件ツリーの使用方法」をご参照ください。

   説明

   または、コード編集モードに切り替えて、高度な設定にJavaScript構文を使用します。

5. 右側の [インタラクションアクション] アイコンをクリックし、インタラクションアクションを追加します。

6. トリガーするウィジェットとアクションを選択し、縦棒グラフとして表示するように設定します。

   説明

   ブループリントとビューの操作アクションに移動するには、アイコンをクリックします。 アイコンをクリックして、現在のアクションの入力パラメーターの説明を表示します。

   さまざまな対話アクションの設定は異なります。特定のコンテキストを参照してください。

同じように、インタラクションの発生をタブリストに関連付けます。タブIDが2の場合、縦棒グラフは非表示アクションを実行します。

エフェクトをプレビューするには、右上隅の [プレビュー] ボタンをクリックします。 表示タブを選択して縦棒グラフを表示するか、非表示タブを選択して表示します。

ブループリントエディタにアクセスするには、ページの左上隅にあるアイコンをクリックします。 ここでは、システムが自動的に生成したインタラクション関係を調べることができます。 単一パス判定ノードの条件は、アクショントリガー条件で指定されます。

(オプション) 必要に応じて、トリガー条件、応答アクション、および対応するフィルターを変更します。

グローバル変数の下にcontentというグローバル変数を作成します。

[コントロール] > [選択クラス] カテゴリの [タブリスト] ウィジェットを、[一般タイトル] ウィジェットとともにキャンバスに追加します。

[一般タイトル] ウィジェットを選択し、右側のデータソースパネルの [グローバル変数] コンテンツにリンクします。 フィルターを適用して、ウィジェットに適したコンテンツをフォーマットします。

// The data input parameter represents the value passed in by the content variable. After being processed by the filter, it is given to the widget in the correct format.
function filter(data) {
   return [{
      value: data
  }];
}

タブがクリックされたときにグローバル変数の値を変更するには、タブリストを設定します。

1. タブリストウィジェットを選択します。 右側の [詳細] パネルで、[インタラクション発生] アイコンをクリックして、タブクリックのインタラクション発生を追加します。 Enable Eventスイッチはデフォルトで有効になっています。

2. [発生タイプ] を選択し、[タブがクリックされたとき] を追加します。

   説明

   オカレンスの横にあるアイコンをクリックして、現在のオカレンスの応答パラメーターの説明を表示します。

3. の右側にある [インタラクションアクション] アイコンをクリックし、インタラクションアクションを追加します。

4. [グローバル変数] コンテンツとして応答するオブジェクトを選択し、アクションを [データのインポート] に設定します。

5. 動的パラメーター設定に切り替え、フィルターを作成し、次のコードを追加します。 Tabクリックイベントのデータを処理し、戻り値をグローバル変数コンテンツにインポートします。

   // After being processed by the filter, obtain the final value needed by the global variable.
   function filter(data) {
     return data.content;
   }

プレビュー効果を表示するには、右上隅の [プレビュー] をクリックします。 さまざまなタブをクリックすると、選択したタブに対応するコンテンツが一般タイトルに表示されます。