機械翻訳について

Webページへのビジュアライゼーションの埋込み

Webページにデータの視覚化を埋め込むことができます。

HTMLページに埋め込むJavaScriptソースおよびAPI属性

HTMLページにembedding.js JavaScriptソース・ファイルへの参照を含める必要があります。

embedding.jsファイルはHTMLページのHEADセクションに配置する必要がありますが、<oracle-dv>タグの前に配置する必要があります。

たとえば、<script src="http://<dv-server-name>:<dv-server-port>/dv/ui/api/v1/plugins/embedding/<embedding-mode>/embedding.js" type="text/javascript"></script>

embedding-modeに使用する値は、jetまたはstandaloneのいずれかである必要があります。 既存のOracle JETアプリケーション内にデータ視覚化コンテンツを埋め込む場合は"jet"を使用し、Oracle JETを使用しない汎用アプリケーションにData Visualizationコンテンツを埋め込む場合は"standalone"を使用します。 また、jetを使用する場合は、アプリケーションによって使用されるOracle JETのバージョンがData Visualizationで使用されるOracle JETのバージョンと一致している必要があります。

Oracle JETは、Oracle Analytics Cloudユーザー・インタフェースに使用されるJavaスクリプト・ベースのライブラリのセットです。 http://www.oracle.com/technetwork/developer-tools/jet/overview/index.htmlを参照してください。

埋込みページとData Visualizationサーバーとの間でシングル・サインオン(SSO)を有効にする必要があります。 Data Visualizationオブジェクトを外部Webページに埋め込むには、Oracle Analytics Cloudに認証済セッションが必要です。 これを実現するには、外部アプリケーションとOracle Analytics Cloudの間で同じSSOを使用することをお薦めします。 ユーザーが外部アプリケーションに接続すると、SSOを使用してOracle Analytics Cloudへの認証が行われます。

ビジュアライゼーションを埋め込むWebページに、適切な属性値とともに次のスニペットを追加する必要があります:

<oracle-dv project-path="" project-json="" active-page="" active-tab-id="" filters=""></oracle-dv>

「サポートされている属性」 - これらの属性は、ノック・アウト・モデル内に定義されている静的な文字列およびプロパティをサポートします(ノック・アウトはOracle JETで使用されるテクノロジです)。
  • project-path: プロジェクトを保存した場合は、レンダリングするプロジェクトのリポジトリ内のパスを指定できます。

  • project-json: JSON形式のプロジェクトがOracle Data Visualizationである場合、ここにそのプロジェクトを入力できます。 project-pathまたはproject-jsonのいずれかを指定する必要があります。

  • active-page: これはオプションです。 この属性は、デフォルト以外のキャンバスまたはインサイトがレンダリングされる場合に使用します。 active-pageを指定する場合は、active-tab-idを使用して、表示する正確なキャンバスまたはストーリ・ページを指定することもできます。 有効な値は、canvasおよびinsightです。

  • active-tab-id: これはオプションです。 この属性を使用して、表示するキャンバスまたはストーリ・ページのIdを指定します。

  • filters: これはオプションです。

これらの属性をKnockoutモデルにバインドする例については、「埋込みアプリケーションがOracle JETテクノロジを使用しない場合のWebページへの視覚化の埋込み」を参照してください。

HTMLページに埋め込むフィルタを渡す

埋め込みは、数値フィルタとリスト・フィルタをサポートします。 これらのいずれかを使用して、任意のタイプのデータをフィルタリングできます。

フィルタ・ペイロードは、配列アイテムごとに1つのフィルタJavascriptオブジェクトを含むJavascript配列です。

フィルタの適用中にプロジェクトをレンダリングすると、次のようになります:

<oracle-dv project-path="{{projectPath}}" filters="{{filters}}">
</oracle-dv>
 
<script> 
requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
   function MyProject() {
      var self = this;
      self.projectPath =  ko.observable("/users/weblogic/EmbeddingStory");
      self.filters = ko.observableArray([{
         "sColFormula": "\"A - Sample Sales\".\"Products\".\"P2  Product Type\"",
         "sColName": "P2  Product Type",
         "sOperator": "in", /* One of in, notIn, between, less, lessOrEqual, greater, greaterOrequal */
         "isNumericCol": false,
         "bIsDoubleColumn": false,
         "aCodeValues": [],
         "aDisplayValues": ['Audio', 'Camera', 'LCD']
      },{
         "sColFormula": "\"A - Sample Sales\".\"Base Facts\".\"1- Revenue\"",
         "sColName": "Rev",
         "sOperator": "between", /* One of in, notIn, between, less, lessOrEqual, greater, greaterOrequal */
         "isNumericCol": true,
         "bIsDoubleColumn": false,
         "aCodeValues": [],
         "aDisplayValues": [0, 2400000] /* Because the operator is "between", this results in values between 0 and 2400000 *
/
  }]);
}
   ko.applyBindings(MyProject);
});
</script>
「サポートされているフィルタの属性」 - フィルタ・ペイロード内の各フィルタ・オブジェクトには、次の属性が含まれている必要があります:
  • sColFormula: フィルタリングする列の3つの部分の列式。 これは3つの部分でなければなりません。 これが何であるかわからない場合は、列を使用してデータ・ビジュアライゼーション内にプロジェクトを作成し、デバッグ・メニュー・アイテムに移動してその列の式を検索します。

  • sColName: この列の一意の名前。 これは空であってはいけません。

  • sOperator: innotInbetweenlesslessOrEqualgreatergreaterOrequalのうちの1つ。innotInはリスト・フィルタに適用されます。betweenlesslessOrEqualgreater、およびgreaterOrEqualは数値フィルタに適用されます

  • isNumericCol: これが数値フィルタかリスト・フィルタかどうか。 値はtrueまたはfalseでなければなりません。

  • bIsDoubleColumn: この列の表示値の背後に二重列値があるかどうか。 値はtrueまたはfalseでなければなりません。

  • aCodeValues: bIsDoubleColumntrueの場合は、この配列が使用されます。

  • aDisplayValues: bIsDoubleColumnfalseの場合、この配列はユーザー・インタフェース内の値をフィルタリングして表示するために使用されます。 bIsDoubleColumntrue,の場合、この配列の値はユーザー・インタフェースでの表示に使用され、aCodeValuesの値はフィルタリングに使用されます。 bIsDoubleColumntrueの場合、aCodeValues配列にあるものと同じ数のエントリがこの配列になければなりません。値は整列していなければなりません。 つまり、aCodeValuesに '1'と '2'の2つの値がある場合、aDisplayValuesは 'a'と 'b'の2つの値を持つ必要があります。 '1' 'b'のコード値です。

埋込みHTMLページのデータのリフレッシュ

プロジェクトにコンテンツを埋め込むと、そのプロジェクトはデータが変更される可能性がある基礎となるデータ・セットにアクセスする可能性があるため、プロジェクトのリフレッシュが必要になります。 「データの視覚化」プロジェクトのHTMLページに埋め込まれたデータのリフレッシュを構成できます。

すべての「データの視覚化」埋込みプロジェクト(<oracle-dv>要素で定義)には、埋込みプロジェクトに表示されているデータをリフレッシュするときに起動できるrefreshDataメソッドが用意されています。

HTMLページに埋め込まれている1つのプロジェクトのデータをリフレッシュするコードは、次のようになります:

<oracle-dv id="project1" project-path="{{projectPath}}">
</oracle-dv>
 
<script> 
   function refreshProject() {
      $('#project1')
  [0].refreshData();
}
</script>

HTMLページに埋め込まれた複数のプロジェクトのデータをリフレッシュするコードは、次のようになります:


<script> 
   function refreshProject()
   {
      $('oracle-dv').each(function() {
         this.refreshData();
         });
}
</script>

「データの視覚化」プロジェクトでリフレッシュしたデータの変更は、データをリフレッシュするメソッドの起動時に埋込みHTMLページに反映されます。

特定のデータ視覚化プロジェクトを埋め込むためのJavascriptおよびHTMLの検索

外部webページに「データの視覚化」プロジェクトを埋め込むJavascriptおよびキャンバスHTMLは、「データの視覚化」プロジェクトの編集時に埋込みタブを通して自動的に生成および表示されます。 このコードをコピーして外部のwebページに貼り付け、「データの視覚化」のコンテンツを埋め込むことができます。

  1. プロジェクトを表示します。
  2. プロジェクトのメニューで、「開発者」をクリックします。
  3. 「埋込み」ページを表示します。
  4. 「コピー」をクリックして、埋込みの各埋込みスクリプト、プロジェクトHTMLまたはキャンバスHTMLのコードをコピーします。
次のセクションが「埋込み」ページに表示されます。
  • 「含めるスクリプトの埋込み」 - このインスタンスに埋め込むスクリプト。
  • 「デフォルト」 - 現在のプロジェクトに埋め込むHTML。
  • 「キャンバス"<Name_of_Canvas>"」 - 現行プロジェクトの1つ以上の特定のキャンバスを埋め込むHTML - たとえば、キャンバスC1多角形、キャンバス、C2クラスタなど、現在のプロジェクトから埋め込むキャンバスごとに表示されます。