準備內嵌之 Oracle Analytics 內容的 HTML 頁面

若要內嵌 Oracle Analytics 內容，您必須建立或更新 HTML 頁面，在其中包含必要的 DOCTYPE 宣告、dir 全域屬性、參照 embedding.js JavaScript 來源和內嵌之工作簿的 URL。此外，您還必須指定內嵌模式 (JET 或獨立)、認證方法，以及新增任何屬性。

此主題包含以下資訊：

Doctype 宣告

將 doctype 宣告設為 <!DOCTYPE html>。如果您使用的 doctype 宣告不是 <!DOCTYPE html>，或忘記包含 doctype 宣告，就會產生無法預測的行為，例如無法正確呈現頁面。

Dir 全域屬性

請依網頁地區設定所需的方式設定 dir 全域屬性。dir 全域屬性主要指示內嵌分析內容的版面配置方向。

註：

如果您需要支援多個地區設定，則請使用 JavaScript 來設定屬性。

屬性值的選項包括：

  • rtl - 用於由右至左版面配置方向。
  • ltr - 用於由左至右版面配置方向。
  • auto - 不使用。Oracle Analytics 不支援此值。

<script> 標記與 JavaScript 來源參照

註：

Oracle Analytics 會產生您需要包含的 <script> 標記和 JavaScript 來源 URL。

請將參照 embedding.js 的 <script> 標記新增至您的 HTML 頁面。

JavaScript 來源的 URL 結構為：
  • ”https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/<embeddingMode>/embedding.js”。本文件中的範例使用此 URL。
  • 若為較舊的部署，請使用："http://<instance>.analytics.ocp.oraclecloud.com/ui/dv/v1/embedding/<embeddingMode>/embedding.js"。

其中的 <embeddingMode> 必須是 jet 或 standalone：

  • 若您是將分析內容內嵌在現有的 Oracle JET 應用程式內，請使用 jet。如果您使用 jet，應用程式所使用的 Oracle JET 版本必須與 Oracle Analytics 所使用的 Oracle JET 主要版本相同。例如，如果 Oracle Analytics 使用 JET 11.0.0，則您的自訂應用程式必須使用 JET 11.0.0 或 11.1.0 Oracle Analytics 使用 Oracle JET 版本 11.1.10。

    若要尋找 Oracle Analytics 使用的 JET 版本，請登入 Oracle Analytics、開啟瀏覽器主控台，然後執行此命令： 
    requirejs('ojs/ojcore').version

    內嵌應用程式若使用 Oracle JET，Oracle Analytics 會以其所需的元件擴充該應用程式。請參閱將 Oracle Analytics 內容內嵌至使用 Oracle JET 的自訂應用程式。

    Oracle JET 是一組以 Javascript 為基礎的程式庫，用於 Oracle Analytics 使用者介面。

  • 若在不是使用 Oracle JET 的一般應用程式中內嵌視覺化內容，則要使用 standalone。

    內嵌應用程式若未使用 Oracle JET，Oracle Analytics 會將其 JET 版本與其他元件一起攜至頁面。請參閱將 Oracle Analytics 內容內嵌至未使用 Oracle JET 的自訂應用程式。

認證

您的階段作業需經過認證，才能檢視內嵌的分析內容。您可以使用登入提示或三方 OAuth 認證。請參閱新增認證。

<oracle-dv> 元素

若要內嵌工作簿，您必須在適當大小的元素內新增含有屬性值的下列 HTML 程式碼片段。Oracle Analytics 會產生您需要包含的 HTML。

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

支援的屬性 — 這些屬性支援「剔除」模型中定義的靜態字串與特性。「剔除」是 Oracle JET 中所使用的一種技術。

註：

請參閱將 Oracle Analytics 內容內嵌至未使用 Oracle JET 的自訂應用程式，查看連結這些屬性至「剔除」模型的範例。

  • project-path：指定要呈現之工作簿的路徑。

  • active-page：(選擇性) 指定是否呈現預設值以外的洞察分析。如果指定 active-page，請同時使用 active-tab-id 指定要顯示的確實「展示」工作區。有效值為 insight。

    註：

    active-page 值 canvas 已不再使用。Oracle 建議您將使用 canvas 的內嵌程式碼修改為 insight。使用 canvas 的現有內嵌分析內容將會繼續運作，但瀏覽器主控台中會顯示警告。

  • active-tab-id：(選擇性) 指定要顯示的「視覺化」工作區或「展示」工作區 ID。

  • filters：(選擇性) 允許以程式設計方式將篩選值傳送給內嵌的工作簿。

  • project-options：(選擇性) 在此屬性中，project 是指工作簿。允許您傳送下列選項：
    • bDisableMobileLayout：停用或啟用行動版面配置。行動版面配置係指只有在手機裝置上才可使用的摘要卡片版面配置。值必須是 true 或 false。
    • bShowFilterBar：顯示或隱藏篩選列。值必須是 true 或 false。
    • showCanvasNavigation：根據工作簿「展示」頁籤中的工作區導覽設定，在工作簿中顯示或隱藏工作區。值必須是 true 或 false。

    例如 <oracle-dv project-path="{{projectPath}}" active-page="canvas" active-tab-id="1" filters="{{filters}}" project-options='{"bDisableMobileLayout":true, "bShowFilterBar":false}'></oracle-dv>

  • brushing-type：控制刷取運作方式。您指定的值會覆寫所有其他設定值，包括系統預設值和已儲存工作簿中的設定值。值必須是 on、off 或 auto 字串。
    • on：用來發出一般優先順序的刷取查詢。刷取查詢和視覺化查詢會混合使用並同時執行。
    • auto：預設值。用來發出低優先順序的刷取查詢。當使用者與某個視覺化互動時，於刷取查詢完成前，顯示其他視覺化中的標記可能會有延遲。
  • compatibility-mode：Oracle JET 有不同的主要版本存在時使用。這會在執行時期建立一個 iFrame，作為內嵌之分析內容的封閉測試環境。值必須是 yes、no 或 auto 字串。

    註：

    若設定此屬性，請注意以下兩項：

    如果使用相容性模式，請務必對管理員註冊為安全網域的應用程式選取允許框架。請參閱將應用程式註冊為安全網域。

    若要尋找 Oracle Analytics 使用的 JET 版本，請登入 Oracle Analytics、開啟瀏覽器主控台，然後執行此命令： 
    requirejs('ojs/ojcore').version
    • yes：若一律要在封閉測試環境中使用內嵌的分析內容，請使用此值。這在嵌入至 Oracle APEX 應用程式時非常實用。
    • no：預設值。不要建立 iFrame 時使用。
    • auto：用於自動偵測主機內嵌應用程式與 Oracle Analytics 之間 Oracle JET 版本的主要差異。可以在嵌入至 Oracle APEX 時使用。

範例

在此範例中，所有 project 執行處理都是指工作簿。

<!DOCTYPE html>
<html dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Embedded Oracle Analytics Workbook Example</title>
        <script src="https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/<embedding mode>/embedding.js" type="application/javascript">
        </script>

    </head>
    <body>
        <h1>Embedded Oracle Analytics Workbook</h1>
        <div style="border:1px solid black;position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
            <!--
            The following <oracle-dv> tag is the tag that will embed the specified workbook.
            -->
            <oracle-dv
               project-path="<project path>"
               active-page="insight"
               active-tab-id="snapshot!canvas!1">
            </oracle-dv>
        </div>
        <!--
        Apply Knockout bindings after DV workbook is fully loaded.  This should be executed in a body onload handler or in a <script> tag after the <oracle-dv> tag.
        -->
        <script>
        requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
        ko.applyBindings();
        });
        </script>
    </body>
</html>