DataV:例

手順

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

2. [自分の視覚化] ページで、作成したプロジェクトの上にある [編集] をクリックします。

3. キャンバスエディターで、レイヤー列またはキャンバス上のアセットをクリックします。

   重要

   アセット構成を検索する前に、対応するアセットが視覚化アプリケーションプロジェクトに追加されていることを確認してください。 それ以外の場合は、最初にアセットを追加する必要があります。 詳細については、「ウィジェットの追加」をご参照ください。

4. キャンバスエディターの右側にある [データ] アイコンをクリックします。

5. データソースの右側にある [設定] をクリックします。 [データソースの設定] ペインで、[データソースタイプ] を [API] に設定します。 データソース編集ボックスに、Bilibili https://www.bilibili.com/index/recommend.json のURLを入力します。

6. クロスオリジナルリクエストが開始されるため、[サーバーからリクエストを開始] を選択します。

7. [データ応答のプレビュー] をクリックして、Bilibiliから返されたデータを表示します。

   プレビューボックスに、JSONオブジェクトが返されます。 ただし、カラムチャートのカルーセルリストのデータはオブジェクトリストです。 各オブジェクトには、contentフィールドとvalueフィールドを含める必要があります。 データフィルターを使用してデータ形式を変換するには、次の手順に進むことができます。

8. [データフィルター] を選択し、[フィルターデバッグ] をオンにします。

   

9. フィルターを追加するには、[フィルターの追加] の横にあるアイコンをクリックします。

10. フィルター内のコードを編集します。 次に、[テスト] をクリックしてフィルター結果を表示します。

    

    上図のフィルターのトリガー条件は次のとおりです。

    return data.list.map(item => {
      return {
        value: item.author,
        content: item.description
      };
    });

    次の図は、フィルターによって変換されるデータを示しています。 データには、valueフィールドとcontentフィールドが含まれます。

11. フィルターを編集およびテストした後、[保存] をクリックします。 次に、[データ応答結果] の横にある [更新] アイコンをクリックして、Bilibiliで毎日推奨される動画を表示します。