ウィジェットデータを設定する方法 - DataV - Alibaba Cloud ドキュメントセンター

データソースの設定は、ウィジェットの作成とビジネスデータの視覚化において重要なステップです。これには、データ統合、処理、およびリアルタイム更新が含まれます。このガイドでは、ウィジェットデータの設定プロセスについて詳しく説明します。

機能の説明

DataV-Boardは、静的データ、データベース、アプリケーションゲートウェイなど、さまざまなビジネスデータの統合をサポートしています。データソース構成では、[読み込み状態の無効化] 、[制御モード] 、[自動更新要求] などの設定により、データの読み込みパフォーマンス、ウィジェットパラメーターのやり取り、リアルタイムの更新を最適化しながら、ビジネスデータをウィジェットに統合および適応できます。

操作フロー

前提条件

DataV-Board 7.0コンソールにログインします。
関連するデータソースを準備して追加します。
ダッシュボード編集ページに入り、ウィジェットを作成します。

データの設定

ウィジェットはデフォルトの静的データを備えています。次の例では、静的データ、グローバル変数、およびデータソースを使用してウィジェットのデータソースを構成する例を示します。

ウィジェットの静的データ適応

この例では、静的データを調整して、学校のさまざまな教育段階の生徒数を比較する縦棒グラフを表示する方法を示します。

[列グラフ] ウィジェットを作成して選択し、[データソース] パネルに移動し、[データマッピング] をクリックして、列グラフの既定のデータと構造を確認します。
データ構造を調べます。縦棒グラフには、x軸データ用のxフィールド、y軸データ用のyフィールド、およびカラースタックグループ用のcolorFieldフィールドが必要です。包括的な説明については、縦棒グラフパラメーターの説明を参照してください。
ビジュアルエディターでは、静的データを直接変更できます。
クリックしてコードエディターモードに切り替えます。ここでは、JSON形式のコードを追加、削除、または変更することで、データソースを編集できます。
以下に示すようにJSONデータを調整すると、縦棒グラフには、学校のさまざまな教育段階にわたる生徒数の比較が表示されます。
さまざまな教育段階の学生番号のJSONデータ
```
[
  {
    "colorField": 100,
    "x": "小学",
    "y": 145
  },
  {
    "x": "初中",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "高中",
    "y": 290,
    "colorField": 100
  }
]
```
説明
データを設定した後、必要に応じてスタイルを調整できます。たとえば、凡例を隠したり、軸のタイトルを追加したり、グラフの明瞭度を高めることができます。

ウィジェットのグローバル変数適応

ウィジェットはグローバル変数を入力データとして利用できます。この例では、schoolInfoグローバル変数を使用して縦棒グラフデータをウィジェットに統合する方法を示します。

[グローバル変数] タブに移動し、新しい変数を作成し、schoolInfoに名前を変更します。

次のように初期値の内容を更新します。

さまざまな教育段階の学生番号のJSONデータ

[
  {
    "colorField": 100,
    "x": "小学",
    "y": 145
  },
  {
    "x": "初中",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "高中",
    "y": 290,
    "colorField": 100
  }
]

[列グラフ] ウィジェットを作成して選択し、[データソース] パネルに移動し、[データマッピング] をクリックして、列グラフの既定のデータと構造を確認します。データ構造を調べます。縦棒グラフには、x軸データ用のxフィールド、y軸データ用のyフィールド、およびカラースタックグループ用のcolorFieldフィールドが必要です。包括的な説明については、縦棒グラフパラメーターの説明を参照してください。
[Datasource Type] を [global variable] に設定し、ウィジェットのデータソースとしてschoolInfoを選択します。
ウィジェットデータは静的データと整列し、適応の必要性を排除する。次に、縦棒グラフには、学校のさまざまな教育段階にわたる生徒数の比較が表示されます。
説明
グローバル変数は汎用性があり、静的値を渡すだけではありません。詳細については、「グローバル変数の使用」をご参照ください。

ウィジェットのデータソース適応

データソースを介してビジネスデータを統合するには、まずデータを統合してから、データ応答結果を使用してビジネスデータ構造をウィジェットの要件と比較します。 データマッピングまたはフィルターを使用してデータを調整し、目的の形式にします。この例では、商品カテゴリのキーフィールドカテゴリと販売量の数量を含む小売店データセットを使用して、さまざまな商品カテゴリの販売条件を縦棒グラフに示します。

[列グラフ] ウィジェットを作成して選択し、[データソース] パネルに移動し、[データマッピング] をクリックして、列グラフの既定のデータと構造を確認します。データ構造を調べます。縦棒グラフには、x軸データ用のxフィールド、y軸データ用のyフィールド、およびカラースタックグループ用のcolorFieldフィールドが必要です。包括的な説明については、縦棒グラフパラメーターの説明を参照してください。
[Datasource Type] を [RDS for MySQL] として選択し、既存のデータソースを選択し、SQLを使用して準備されたビジネスデータを取得します。

[データ応答結果] をクリックして、返されたデータ構造を確認します。

[
  {   
    "id": 1,
    "category": "Electronics",
    "sales_amount": 15000,
  },
  {
  ...
  }
]

現在のデータ構造が準拠していないため、縦棒グラフの要件に合わせてデータを調整します。この目的でデータマッピングまたはフィルターを使用します。
説明
フィルターとデータマッピングの両方を使用してビジネスデータを処理できます。フィルターは最初に適用されます。
方法1: データマッピング
1. データマッピングのxフィールドとyフィールドを次のように設定します。
2. colorFieldを設定しないと、売上チャートは次のように表示されます。
方法2: フィルター
1. 次のコードに示すように、フィルタを適用してデータを処理します。
```
function filter(data){
  return data.map(item => {
    return {
      x: item.category,
      y: item.quantity,
      colorField: 1
    }
  });
}
```
2. 結果の売上縦棒グラフは次のようになります。

設定項目の説明

データ項目の設定	説明
データソース	コンポーネントのデータソースは、コード編集またはビジュアルエディタを使用して、コンポーネント内に含まれるデータフィールドを表示します。データ型を変更して、コンポーネントのデータを柔軟に設定することもできます。
データマッピング	グラフのフィールド設定をカスタマイズする必要がある場合は、[データマッピング] モジュールで別のフィールドマッピングを設定して、これらのフィールドをコンポーネントの対応するフィールドにマッピングできます。これは、データソースフィールドを変更することなく、リアルタイムのデータマッチングを可能にする。さらに、アイコンをクリックして、フィールドスタイルを個別に設定します。
フィルター	[フィルター] を開いて既存のデータフィルターを選択するか、新しいデータフィルターを作成し、データフィルター機能を実現するようにデータフィルタースクリプトを設定します。詳細については、「データフィルターの管理」をご参照ください。
データ応答結果	この機能は、コンポーネントのデータをリアルタイムで表示します。コンポーネントのデータソースが変更されると、データ応答結果に最新のデータが表示されます。システム応答が遅延した場合は、右側のアイコンをクリックして現在のデータ応答結果を確認するか、右側のアイコンをクリックしてコンポーネントの最新データを取得します。をクリックして例を表示し、現在のコンポーネントのサンプル応答結果を表示することもできます。
読み込み状態の無効化	コンポーネントの更新およびデータダッシュボードのプレビュー中にコンテンツの読み込みを非表示にするには、チェックボックスをオンにします。チェックを外すと、読み込みコンテンツが表示されます。デフォルト設定はオフです。
制御モード	コンポーネントの初期化時にデータ要求を防ぐには、チェックボックスをオンにします。データ要求は、ブループリントエディターで設定されたグローバル変数またはメソッドを介してのみ開始されます。アンチェックは、自動更新要求を可能にする。デフォルト設定はオフです。
自動更新リクエスト	動的ポーリングのポーリング頻度を手動で設定するには、チェックボックスをオンにします。このオプションをクリアすると、自動更新が無効になり、ブループリントエディターによる手動ページ更新またはデータ要求トリガーと更新のグローバル変数イベントが必要になります。

よくある質問

設定の問題については、データソース設定に関するFAQを参照してください。