JSON データソースの追加

重大な変更

現在、Reveal SDK は、Reveal SDK core パッケージからデータソースを分離する過程にあります。プロジェクトの継続的な機能を確保するために、プロジェクトに追加のパッケージをインストールすることが必要になる場合があります。詳細については、サポートされるデータソーストピックを参照してください。

手順 1 - RevealView.onDataSourcesRequested イベントのイベントハンドラーを追加します。

var revealView = new $.ig.RevealView("#revealView");
revealView.onDataSourcesRequested = (callback) => {
    //add code here
    callback(new $.ig.RevealDataSources([], [], false));
};

手順 2 - RevealView.onDataSourcesRequested イベントハンドラーで、RVWebResourceDataSource オブジェクトの新しいインスタンスを作成します。CSV リソースへのアクセスに認証が必要ない場合は、URL プロパティを CSV リソースの URL に設定し、useAnonymousAuthentication プロパティを false に設定します。オプションで、RVWebResourceDataSource オブジェクトをコールバックのデータソースコレクションに追加して、RevealView の [データソース] ダイアログに表示できます。

revealView.onDataSourcesRequested = (callback) => {
    const webDS = new $.ig.RVWebResourceDataSource();
    webDS.title = "Web Data Source";
    webDS.subtitle = "Web Data Source Subtitle";
    webDS.url = "https://excel2json.io/api/share/6e0f06b3-72d3-4fec-7984-08da43f56bb9";
    webDS.useAnonymousAuthentication = true;

    callback(new $.ig.RevealDataSources([webDS], [], false));
};

アプリケーションが実行されたら、新しい可視化を作成すると、新しく作成された Web リソースデータソースが [データソースの選択] ダイアログに表示されます。

手順 3 - データソースダイアログの [JSON の設定] 画面をスキップして JSON データを直接使用するには、RVWebResourceDataSourceItem の新しいインスタンスを作成し、前の手順で作成した RVWebResourceDataSource オブジェクトをコンストラクター引数として渡します。次に、RVJsonDataSourceItem の新しいインスタンスを作成し、「RVWebResourceDataSourceItem」をコンストラクター引数として渡します。Title と Subtitle プロパティを設定します。最後に、Config プロパティをデータの構造を表す JSON 文字列に設定する必要があります。このプロセスを簡単にするために、RVJsonSchemaConfigBuilder クラスを使用して、流暢な API を使用して JSON 構造を構築できます。

RVJsonDataSourceItem オブジェクトを作成したら、それをデータソース項目コレクションに追加します。

revealView.onDataSourcesRequested = (callback) => {
    const webDS = new $.ig.RVWebResourceDataSource();
    webDS.title = "Web Data Source";
    webDS.subtitle = "Web Data Source Subtitle";
    webDS.url = "https://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv";
    webDS.useAnonymousAuthentication = true;

    //to skip the "Set up your JSON" dialog and directly use the JSON data
    const webDSI = new $.ig.RVWebResourceDataSourceItem(webDS);
    const jsonDSI = new $.ig.RVJsonDataSourceItem(webDSI);
    jsonDSI.title = "Sales by Category";
    jsonDSI.subtitle = "Excel2Json";
    jsonDSI.config = new $.ig.RVJsonSchemaConfigBuilder()
        .addNumericField("CategoryID")
        .addStringField("CategoryName")
        .addStringField("ProductName")
        .addNumericField("ProductSales")
        .build();

    callback(new $.ig.RevealDataSources([webDS], [jsonDSI], false));
};

アプリケーションが実行されたら、新しい3可視化を作成すると、[データソースの選択] ダイアログに新しく作成された JSON データソース項目が表示されます。

ネストされたプロパティの操作

JSON では、データは階層的に編成され、多くの場合、オブジェクトに他のオブジェクトまたは配列が含まれる入れ子構造が特徴です。これらの構造をプログラムでナビゲートするには、ネストされたプロパティを指定できます。これは基本的に、目的のデータにつながるキーまたはインデックスのシーケンスです。

const jsonDsItem = new $.ig.RVJsonDataSourceItem(dsItem);
jsonDsItem.config = new RevealApi.RVJsonSchemaConfigBuilder()
        .addStringField("fieldA")
        .addNumericField("fieldB")
        .addNumericField("/geo/location/lat")
        .addNumericField("/geo/location/lng")
        .setIterationDepth(0)
        .build();

コードの取得

このサンプルのソースコードは、GitHub にあります。

JSON データ ソースの追加

ネストされたプロパティの操作

JSON データソースの追加