すべてのプロダクト
Search

このプロダクト

    DataV:一般タイトル

    ドキュメントセンター

    DataV:一般タイトル

    最終更新日:Dec 31, 2024

    このトピックでは、一般的なタイトルの使用方法について説明します。

    概要

    一般タイトルは、モジュールのコアコンテンツまたは重要な情報を伝えるために設計された情報ウィジェットです。 データダッシュボードでは、複数の一般的なタイトルウィジェットを使用して、ダッシュボード内のさまざまなサブモジュールのタイトルまたは中心的なアイデアを表示できます。

    シナリオ

    一般的なタイトルは、視覚化アプリケーションで一般的に使用され、関連するコンテンツの主題を明確にするためのタイトルと説明情報を追加して、コアコンテンツをすばやく直感的に理解するのに役立ちます。 また、他のウィジェットとの対話もサポートし、タイトルが異なる次元ビューまたはデータコンテンツの表示を制御できるようにします。

    エフェクト表示

    • 静的タイトル

      image.png

    • インタラクティブシナリオ

      19577664-CFE8-4D57-B32D-9804B40A8E43

    • リンクジャンプ

      DCF34FEB-3284-4AF3-80BB-07FE614A83BF

    前提条件

    一般タイトルを追加

    1. DataVコンソールにアクセスします。

    2. [ワークベンチ] > [すべてのアプリケーション] > [データダッシュボード] で、対象のダッシュボードをクリックしてキャンバス編集ページに移動します。

    3. 左側のナビゲーションウィンドウの [ウィジェットライブラリ] > [情報] リストで、[一般タイトル] ウィジェットをクリックしてキャンバスに追加します。

    グローバル検索を使用して関連ウィジェットを追加することもできます。

    ビジネスデータの統合

    ウィジェットを追加した後、準備されたビジネスデータをウィジェットに統合して表示できます。 一般的なタイトルをクリックし、右側の [データソース] タブでウィジェットに表示されるデータを選択します。 image

    • 一般的なタイトルによって受信されるデータフィールドは、以下のように紹介される。

      項目

      説明

      値

      (オプション) タイトルの内容。 空でない場合は、スタイルの設定を上書きします。 空の場合、[スタイル] > [基本スタイル] > [タイトルコンテンツ] 設定項目のコンテンツが使用されます。

      url

      (オプション) タイトルジャンプのハイパーリンクアドレス。 空でない場合は、スタイルの設定を上書きします。 空の場合、[スタイル] > [インタラクション] > [ハイパーリンク設定] > [ハイパーリンク] 設定項目のURLが使用されます。

      サンプル一般タイトルのデータ構造とエフェクト表示は次のとおりです。

      [
  {
    "value": "DataV Official Website",
    "url": "https://www.alibabacloud.com/en/product/datav?_p_lc=1&spm=a2c63.p38356.6791778070.263.36702771FLuZOw"
  }
]

      プレビューまたはパブリッシュインターフェイスで、ウィジェットをクリックして、対応するリンクにジャンプします。

      image

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

      設定アイテム

      説明

      データソースの選択

      CSVファイル、API、さまざまなデータベースなど、さまざまな種類のデータの統合をサポートします。 詳細については、「サポートされているデータソースの種類」をご参照ください。 ビジュアルテーブルまたはコードを使用してデータフィールドを編集できます。

      フィルターの設定 (オプション)

      データ構造変換、フィルタリング、表示、および簡単な計算を実現するためにフィルタコードをカスタマイズするために使用されます。 詳細については、「データフィルターの管理」をご参照ください。

      データマッピングの設定

      選択したデータソースのフィールドをウィジェットの対応するフィールドにマッピングして、リアルタイムのデータマッチングを実現します。 アイコンをクリックしimageて、フィールドスタイルを設定します。

      レスポンス結果の表示

      ウィジェットに統合されたデータをリアルタイムで表示するために使用します。 ウィジェットデータソースが変更されると、最新のデータがここに表示されます。

      • データ応答結果をクリックして、書き込まれたデータフィールドのコードを表示します。

      • をクリックして例を表示し、データソースが受信した配列タイプとコード例を表示します。 この例を参照して、関連フィールドを記述できます。

      その他のデータ要求設定:

      • [読み込み状態の無効化] を選択すると、データダッシュボードの更新またはプレビュー時にウィジェットの初期化中の読み込みコンテンツは表示されません。

      • 制御モード: 選択すると、ウィジェットは初期化状態でデータを要求しません。 現時点では、データ要求は、ブループリントエディタまたはグローバル変数イベントを介してのみ開始できます。

      • 自動更新リクエスト: 選択すると、プラットフォームは設定したポーリング時間に従ってデータを動的にポーリングおよび更新します。 選択しない場合は、手動でページを更新するか、ブループリントエディターとグローバル変数イベントを使用してデータを更新するリクエストをトリガーする必要があります。

    一般タイトルの設定

    右側のパネルで、一般的なタイトルウィジェットをクリックして、基本スタイル、グローバル変数、インタラクションの発生、およびその他の詳細な設定を、ブループリントのインタラクション設定とともに設定します。

    スタイル設定

    スタイルパネルでは、テキストサイズ、レイアウト、背景色、および一般タイトルのその他のスタイルを設定できます。 関連する設定項目は次のように紹介されます。

    説明

    アイコンをクリックしてimageキーワードを検索し、必要な設定項目をすばやく見つけることもできます。 検索はファジーマッチをサポートします。 詳細は、「設定項目の検索」をご参照ください。

    関連する設定項目は次のように紹介されます。

    設定アイテム

    説明

    イラスト

    グローバル設定

    データダッシュボードでのウィジェットの位置分布、透明度、およびインタラクションの浸透度を定義します。

    • 不透明度: 値が小さいほど、ウィジェットはより透明になります。 値の範囲は0〜1以内です。

    • インタラクション侵入: 有効にすると、マウスがウィジェットに侵入して、ダッシュボードに多数のウィジェットがある場合にウィジェットが基になるウィジェットとのインタラクションをブロックしないようにできます。

    image

    基本的なスタイル設定

    タイトルの内容、テキストサイズ、レイアウト、色、およびオーバーフローに省略記号を使用するかどうかを定義します。 オーバーフロー省略記号を有効にすると、オーバーフローするテキストは省略記号で塗りつぶされます。

    image

    インタラクションの設定

    一般タイトルのハイパーリンクとジェスチャーカーソルを設定します。

    • ハイパーリンク: リンクを設定したら、プレビューまたは公開ページで一般タイトルをクリックして、対応するリンクにジャンプします。

    • 新しいウィンドウで開く: 有効にすると、プレビューまたは公開ページで一般的なタイトルをクリックすると、ブラウザに新しいウィンドウが開き、ジャンプリンクのコンテンツが表示されます。 有効でない場合、リンクコンテンツは現在のページに表示されます。

    • ジェスチャーカーソル: 有効にすると、ダッシュボードのプレビュー中に一般的なタイトルウィジェットの上にカーソルを合わせると、マウスがジェスチャーカーソルとして表示されます。

    image

    高度な設定

    一般的なタイトルと他のウィジェット間の対話とデータ送信の関係を定義します。 関連する設定項目は次のように紹介されます。

    設定アイテム

    説明

    イラスト

    相互作用の発生

    ウィジェットの連携を実現するために、他のウィジェットとのインタラクション動作を定義します。

    アイコンをクリックしimageて、関連するインタラクションの発生とインタラクションのアクションを定義します。

    image

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

    ウィジェット内のグローバルパラメータを関連付けて、パラメータ送信とウィジェットの相互作用を実現します。 アイコンをクリックしimageて対応する命令を有効にし、命令に必要なグローバル変数を関連付けます。

    [タイトル] をクリックすると、コールバック値がスローされ、デフォルトではvalueとurlフィールドの値がデータにスローされます。 詳細については、「ウィジェット操作の設定」をご参照ください。

    Blueprintインタラクション

    ブループリントエディターを使用して、ビジュアル接続メソッドを使用してウィジェット間のインタラクション関係と動作ロジックを定義します。

    手順

    1. キャンバス編集ページで、上部のメニューバーの左側にあるimageアイコンをクリックして、ブループリントエディターに入ります。

    2. レイヤーノードリストで、一般的なタイトルウィジェットの上にマウスを置き、アイコンをクリックしてimageウィジェットをメインキャンバスに追加します。

    3. 接続方法を通じて、関連するウィジェットのブループリントのインタラクション効果を必要に応じて設定します。

      例は次のとおりです。 image

    構成アイテムの紹介

    関連するインタラクションの発生とアクションの導入は次のとおりです。

    説明

    ブループリント設定インターフェイスの右側にある対応するイベントまたはアクションの後にあるimageアイコンをクリックして、関連するパラメーターの詳細な紹介を表示することもできます。

    カテゴリ

    サブカテゴリ

    説明

    イベント

    When Data Updates

    このイベントは、ウィジェットデータが更新されたときにスローされます。

    データ要求ステータスが変更された場合

    このイベントは、データ要求のステータスが変更されたときにスローされます。 ステータス値には、Void、Loading、Success、Errorが含まれます。

    タイトルをクリックするとき

    タイトルをクリックしたときにスローされるイベントと、対応するデータ項目。 データの例は次のとおりです。

    {
    "value": "Title",
    "url": "https://www.aliyun.com"
}

    Action

    データのインポート

    コンポーネントのレンダリング形式でデータを処理したら、コンポーネントにインポートして再描画します。 サーバーデータを再度要求する必要はありません。 データの例は次のとおりです。

    [
  {
    "value": "Title",
    "url": "https://www.aliyun.com"
  }
]

    リクエストデータ

    サーバーデータを再度要求します。 入力データ処理ノードまたはレイヤーノードによってスローされたデータがパラメーターとして使用されます。 たとえば、一般タイトルに設定されているAPIデータソースがhttps:// api.testで、Request dataアクションに渡されるデータが { id: '1'} の場合、最終的なリクエストはhttps:// api.test?id=1になります。

    シフト

    ウィジェットを指定した位置に移動します。 データの例は次のとおりです。 

        {      
      // Movement method. Absolute positioning: to, relative positioning: by. Default value: to.
        "positionType": "to",
      // Specified position. x coordinate, y coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation method.
      "animation": {
        "enable": false,
        // Animation delay, in ms.
        "animationDuration": 1000,
        // Animation curve. Optional values are: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

    スイッチの可視性

    ウィジェットを表示または非表示に切り替えます。 データの例は次のとおりです。

    {
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

    • animationType: アニメーションメソッド。 表示 (表示 /消去) 、フェード (フェードイン /アウト) 、slideToUp (フライイン /アウト) として設定できます。 設定されていない場合、アニメーションはありません。

    • animationDuration: アニメーション遅延、デフォルトは1000ミリ秒です。

    • animationEasing: アニメーション曲線。 それは線形 (ユニフォーム) 、easeInOutQuad (滑らかな) 、easeInOutExpo (遅い速い遅い) として形成することができます。

    表示

    非表示

    ウィジェット設定の更新

    ウィジェットのスタイル設定を動的に更新します。

    1. まず、ウィジェットのスタイルパネルで、[設定をクリップボードにコピー] をクリックしてウィジェットの設定データを取得します。

    2. 必要に応じて、ブループリントエディターの設定ページのデータ処理ノードで、対応するスタイルのフィールド値を変更します。

    デモ

    このデモでは、タブリストのカルーセル機能を使用して、一般的なタイトルを動的に表示します。

    1. キャンバスにウィジェットを追加します。

      1. DataVコンソールにアクセスします。

      2. データダッシュボードを選択し、[編集] をクリックしてキャンバスエディターに入ります。

      3. 左側のナビゲーションウィンドウのウィジェットライブラリで、[タブリスト] および [一般タイトル] ウィジェットをクリックしてキャンバスに追加します。

    2. ブループリントのインタラクションを設定します。

      1. ページのimage左上隅にあるアイコンをクリックして、青写真ページに入ります。

      2. 左側の [レイヤーノード] タブで、ウィジェットの上にマウスを置き、imageアイコンをクリックしてウィジェットをメインキャンバスに追加します。

        メインキャンバスに一般的なタイトルとタブリストのウィジェットを追加するには、この操作を順番に実行する必要があります。

      3. 左側の [ロジックノード] タブで、シリアルデータ処理ノードにマウスを移動し、imageアイコンをクリックしてウィジェットをメインキャンバスに追加します。

      4. 次のようにウィジェットを接続して、タブリストをクリックすると、対応するデータを一般タイトルにインポートします。 image

      5. シリアルデータ処理ノードをクリックして、ノードの処理方法を設定します。 image

        return [{value:data.content}];

    3. ページの右上隅にある [プレビュー] をクリックして、表示結果をプレビューします。 F4D7FB80-C7C1-4D59-9ED0-04252549C503

    4. (オプション) 特定のタブページにジャンプする必要がある場合は、シリアルデータ処理ノードの前に条件判定ノードを追加して、条件が満たされたときに処理方法を実行できます。 満たされない場合、デフォルト値が表示されます。 たとえば、最初のタブページのコンテンツを表示しないでください。 image

      • 条件判定ノード

        return data.id > 1;

      • シリアルデータ処理: 会った

        return [{value:data.content}];

      • シリアルデータ処理: 会わない

        return [{value: "I am title data"}];

    5. ページの右上隅にある [プレビュー] をクリックして、表示結果をプレビューします。 4EB229AF-1CFD-4806-96A5-32AF54A29784