すべてのプロダクト
Search
ドキュメントセンター

DataV:空白のキャンバスを使用したデータダッシュボードの作成

最終更新日:Dec 26, 2024

この例では、ApsaraDB RDS MySQLのユーザーデータをDataV-Board 7.0に統合してPCデータダッシュボードを作成する方法を示します。 空白のキャンバスを利用して、折れ線グラフ、リストカルーセル、データ適応と視覚化分析のための一般タイトルなどのコンポーネントを組み込み、最終的にエンタープライズ操作画面を構築します。

概要

説明

この例のデータは、デモンストレーションのみを目的としており、実際のビジネスでの使用を意図していません。 実際のデータをビジネスアプリケーションに使用してください。

アーキテクチャの説明

このトピックの設定手順に従って、以下に示すアーキテクチャに似たランタイム環境を確立します。 実際のデプロイ時に、特定のリソース計画に基づいて設定を調整できます。

image

効果デモンストレーション

提供された構成を使用してデプロイを完了すると、以下に示す効果を持つデータダッシュボードが生成されます。 image

説明

データダッシュボードには多数の構成が含まれ、最終的なダッシュボードはこれらの構成によって異なります。 このトピックでは、関連する機能と操作プロセスについて詳しく説明します。 実際の効果はあなたの実行に依存します。

準備

ApsaraDB RDS MySQL側

  1. RDS MySQLインスタンスの作成

    この例では、インスタンスは、プラットフォームによって自動的に生成されたVPCとスイッチを使用して、中国 (杭州) リージョンで作成されます。

  2. 必要なデータベースアカウントデータベースを作成し、インスタンス内でサンプルデータを準備します。

    この例では、次のことを確立します。

    • データベースアカウント: user_test

    • データベース名: mysqltest

    • データの例: mysqltestデータベースで、billという名前の請求書テーブルを作成し、1月1日 (2023年) から1月10日 (2023年) までの100のシミュレートされたエントリを設定します。

      SQL文は次のとおりです。

      CREATE TABLE IF NOT EXISTS Bill (
          `id` INT AUTO_INCREMENT PRIMARY KEY,
          `bill_date` DATE NOT NULL COMMENT 'Bill date',
          `amount` DECIMAL(10, 2) NOT NULL COMMENT 'Amount'
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='Bill information table';
      
      DELIMITER ;;
      CREATE PROCEDURE GenerateBillData()
      BEGIN
          DECLARE v_counter INT DEFAULT 1;
          DECLARE v_random_date DATE;
          DECLARE v_random_amount DECIMAL(10, 2);
          
          WHILE v_counter <= 100 DO
              SET v_random_date = DATE_ADD('2023-01-01', INTERVAL FLOOR(RAND() * 10) DAY);
              SET v_random_amount = ROUND(RAND() * 1000, 2);
              
              INSERT INTO Bill (bill_date, amount)
              VALUES (v_random_date, v_random_amount);
              
              SET v_counter = v_counter + 1;
          END WHILE;
      END;;
      DELIMITER ;
      
      -- Call the stored procedure to generate data
      CALL GenerateBillData();
  3. ホワイトリストを設定します。

    DataV-Board 7.0でデータソースを作成するときにRDS MySQLインスタンスへの通常のアクセスを確保するには、RDS MySQLデータベースが配置されているリージョンのホワイトリストIPアドレスをインスタンスホワイトリストに追加します。

    サンプルデータベースは中国 (杭州) リージョンにデプロイされ、内部の仮想プライベートクラウド (VPC) ネットワークを利用します。 したがって、追加する必要があるホワイトリストは100.104.70.0/24です。

ビジネス要件に応じてインスタンスとデータベースの情報を設定することもできます。

DataV-Board 7.0側

  1. DataV-Boardサービスを有効にします

  2. RDS MySQLデータソースの作成

    データソースのコアパラメーター設定は次のとおりです。

    パラメーター

    説明

    タイプ

    RDS MySQLを選択します。 ネットワークタイプでは、[内部] [中国 (杭州)] (杭州リージョン) を選択します。

    名前

    カスタムデータソース名を指定します。 このトピックの例は、mysql_dataです。

    VPC IDVpc接続インスタンスID

    • VPC ID: RDS MySQLインスタンスがバインドされている仮想プライベートクラウド (VPC) のID。

    • VPC接続インスタンスID: RDS MySQLインスタンスのID。

    RDSインスタンスリストで確認できます。 image

    ドメイン名ポート

    • ドメイン名: RDS MySQLインスタンスがバインドされている仮想プライベートクラウド (VPC) の内部ネットワークアドレス。

    • ポート: RDS MySQLインスタンスがバインドされている仮想プライベートクラウド (VPC) の内部ネットワークポート。

    RDSインスタンスリストで確認できます。 ターゲットインスタンスの名前をクリックして製品ページに移動し、次の図に示す手順に従って表示します。 image

    ユーザー名パスワード

    データベースログインアカウントとパスワード。 この例のデータベースアカウントはuser_testで、パスワードは指定したデータベースパスワードです。

    データベース

    [データリストの取得] をクリックし、ドロップダウンリストから作成したデータベースを選択します。 このトピックの例はmysqltestです。

手順1: データダッシュボードの作成

  1. DataV-Board 7.0コンソールにログインします。

  2. データダッシュボードを作成します。

    1. [すべてのアプリケーション] > [PCダッシュボードの作成] をクリックします。

    2. 空白のダッシュボードで [ダッシュボードの作成] をクリックします。

    3. ダッシュボード名を入力し、デフォルトのプロジェクトグループを使用して、[ダッシュボードの作成] をクリックします。

      ダッシュボード名の例はmysql_displayです。

ダッシュボードが作成されると、キャンバスエディタページにリダイレクトされ、必要に応じてデータソースに接続してキャンバス情報を構成できます。

説明

デフォルトのキャンバスサイズは1920 × 1080です。 必要に応じて、キャンバスエディターの右側にある [ページ設定] エリアで調整できます。

ステップ2: ウィジェットの追加と設定

まず、データにアクセスするためのウィジェットを決定します。 次に、このウィジェットを使用してデータを調整し、表示スタイルを設定します。 このトピックでは、データアクセスの例として、折れ線グラフ、リストカルーセル、および一般的なタイトルウィジェットを使用します。 具体的な動作は以下の通りである。

折れ線グラフを使用したデータへのアクセス

折れ線グラフは、必要に応じて特定の条件下でデータの成長傾向を観察するのに役立ちます。 例えば、1月2, 2023と比較して、1月3日2023請求表に合計請求額の傾向を表示することができる。

  1. キャンバスに折れ線グラフを追加します。

    ダッシュボードの編集ページで、次の図に示す手順に従って折れ線グラフを追加します。

    image

    右側のウィジェット編集エリアで、折れ線グラフをクリックして、スタイル、データソース、およびその他のウィジェット情報を必要に応じて調整します。 image

  2. データソースデータにアクセスします。

    1. データソースにアクセスし、データを表示します。

      [データソース] エリアで、作成したデータソースを選択し、クエリステートメントを使用してデータテーブルのフィールド条件を表示します。 設定例は次のとおりです。

      • データソースタイプ: RDS for MySQL

      • データソース名: mysql_Data

      • クエリステートメント: 1月1, 2023日から1月8, 2023日までの期間の [請求] テーブルから1日の合計請求額を取得します。

        説明

        特定の日の請求額は翌日に集計されます。 したがって、1月1日 (2023) から1月8日 (2023) までの請求書を確認すると、実際には12月31日 (2022) から1月7日 (2023) までに発生した料金が表示されます。

        SQL文は次のとおりです。

        SELECT
            DATE(bill_date) AS 日期,
            SUM(amount) AS 日总金额
        FROM
            Bill
        WHERE
            bill_date BETWEEN '2023-01-01' AND '2023-01-08'
        GROUP BY
            DATE(bill_date)
        ORDER BY
            日期;

      image

    2. フィルターを使用して、データソースデータを調整します。

      データテーブルのフィールドがウィジェットフィールドと一致しない場合は、フィルターを使用してフィルターコードをカスタマイズし、データソースデータをウィジェットに適合させます。

      [フィルター] を選択し、手動で [作成] または [人工知能の推奨事項] を使用してフィルターコードをカスタマイズします。 設定後、[保存] をクリックします。

      image

      この例のフィルタコードは次のとおりです。

      var result = [];
      for (var i = 0; i < data.length; i++) {
        result.push({
          x: data[i].日期,
          y: data[i].日总金额,
          colorField: "type1"
        });
      }
      return result;
      • X軸: 購入日を表示します。

      • Y軸: 毎日の合計金額を表示します。

      • フィールドの色: 固定色のtype1として定義されます。

  3. ウィジェットのスタイルを変更します。

    ウィジェットのX軸とY軸のフォントサイズを15pxに設定し、折れ線グラフにY軸の値を表示できるようにします。

    image

リストカルーセルを使用したデータへのアクセス

リストカルーセルは、データテーブルのすべてのレコードを動的に表示します。 例えば、請求書テーブル内のすべての請求書エントリを循環させることができる。

  1. キャンバスにリストカルーセルを追加します。

    ダッシュボードの編集ページで、次の図に示す手順に従って、リストカルーセルを追加します。 image

    リストカルーセルをクリックして、右側のウィジェット編集エリアで必要に応じてウィジェットのスタイル、データソース、またはその他の情報を調整します。

    リストカルーセルをクリックして、右側のウィジェット編集エリアで必要に応じてウィジェットのスタイル、データソース、およびその他の情報を調整します。 image

  2. データソースデータにアクセスします。

    [データソース] エリアで、作成したデータソースを選択し、クエリステートメントを使用してデータテーブルのフィールド条件を表示します。 設定例は次のとおりです。

    • データソースタイプ: RDS for MySQL

    • データソース名: mysql_Data

    • クエリ文: [請求書] テーブルのすべての請求書レコードを表示します。 ステートメントは次のとおりです。

      select * from Bill;

    image

  3. ウィジェットのスタイルを変更します。

    RDS MySQLテーブルに3つのフィールド (id、bill_date、amount) のデータが表示されるので、それに応じてウィジェットスタイルの列見出しを調整します。 動作は以下の通りである。

    • 列フィールド名: RDS MySQLデータテーブルのフィールド名を対応する列に一致させます。 3つのタグをそれぞれ "id, bill_date, amount" に変更します。

    • 列表示名: リストカルーセルに表示される列名をそれぞれ「ユーザーID、消費日、金額」に変更します。

    image

一般的なタイトルを使用

この例では、一般的なタイトルがデータダッシュボードのタイトルバーとして機能します。

  1. ダッシュボードの編集ページで、次の図に示す手順に従って、キャンバスに一般的なタイトルを追加します。 image

  2. 右側のウィジェット編集エリアで、一般タイトルをクリックして、スタイル、データソース、およびその他のウィジェット情報を必要に応じて調整します。 image

    構成スタイルの例は次のとおりです。 image

ステップ3: データダッシュボードのプレビュー

ウィジェットを設定したら、ダッシュボード編集ページの右上隅にある [プレビュー] をクリックして、データダッシュボードの外観をプレビューします。 ダッシュボード編集ページでウィジェットをドラッグアンドドロップして、ウィジェットの位置、サイズ、その他のレイアウトの詳細を調整することもできます。

この例で作成されたダッシュボードを以下に示します。 image

ステップ4: データダッシュボードの公開と展開

データダッシュボードの準備ができたら、オンラインで公開し、関連するデバイスに展開して使用する必要があります。

  1. ダッシュボード編集ページの右上隅にある [公開] をクリックし、[大画面の公開] を選択します。

  2. ダッシュボードのアクセス情報を取得し、アクセス制限を設定します。

    公開後、ダッシュボード編集ページの右上隅にある [公開済み] をクリックして、アクセスの詳細を取得し、アクセス権を設定します。

    image

    • アクセスは、QRコード、リンクアドレス、およびその他の方法でサポートされています。

    • パスワード認証やトークンベースの認証など、必要に応じてアクセス権を設定します。 他のシステムとの統合とアクセス権限の制御が必要な場合は、トークン認証を有効にすることを検討してください。

    • 公開スナップショット領域で公開されたダッシュボードのバージョンを確認し、新しいバージョンを追加するか、以前のバージョンに戻すことで管理できます。

  3. アクセスアドレスなどのダッシュボードアクセスの詳細を取得したら、それを表示するためにレンダリングホスト、PC、携帯電話、およびその他のデバイスに投影します。

ステップ5: データダッシュボードのプロジェクト

データダッシュボードを公開した後、ビジュアルアプリケーションセンターに進み、ダッシュボードをプロジェクトします。

  1. ビジュアルアプリケーションセンターに移動します。

    1. DataV-Board 7.0コンソールにログインします。

    2. 上部のナビゲーションバーで、右側の [Visual Application Center] をクリックします。

  2. デモ計画を作成し、次の図に示す手順に従って計画します。 image

関連ドキュメント