CSV データソースの追加

重大な変更

現在、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://raw.githubusercontent.com/fivethirtyeight/data/master/airline-safety/airline-safety.csv";
    webDS.useAnonymousAuthentication = true;

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

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

手順 3 - [データソース] ダイアログの [CSV の設定] 画面をスキップして CSV データを直接使用するには、RVWebResourceDataSourceItem の新しいインスタンスを作成し、前の手順で作成した RVWebResourceDataSource オブジェクトをコンストラクター引数として渡します。次に、RVCsvDataSourceItem の新しいインスタンスを作成し、RVWebResourceDataSourceItem をコンストラクター引数として渡します。Title、Subtitle、およびその他の必要なプロパティを設定します。RVCsvDataSourceItem オブジェクトを作成したら、それをデータソース項目コレクションに追加します。

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 CSV" dialog and directly use the CSV data
    const webDSI = new $.ig.RVWebResourceDataSourceItem(webDS);            
    const csvDSI = new $.ig.RVCsvDataSourceItem(webDSI);
    csvDSI.title = "CSV Data";
    csvDSI.subtitle = "CSV Data Subtitle";

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

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

コードの取得

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

CSV データ ソースの追加

CSV データソースの追加