共用方式為

建立視覺效果

  • 發行項

此 API 提供在報表頁面上建立新視覺效果的方法。

如何建立視覺效果並將其系結至數據

建立特定類型的空白視覺效果，然後將視覺效果系結至數據欄位。 如需視覺效果類型清單，請參閱現成的視覺效果類型。

注意

未安裝在視覺效果窗格中的視覺效果無法新增至報表。 這適用於未安裝和已卸載的現成視覺效果的自定義視覺效果。

  1. 使用下列參數設定您想要建立的視覺效果：

    • 視覺效果類型：您想要建立的視覺效果類型，例如 barChart。
    • 版面配置（選擇性）：要套用至新視覺效果的配置。
    • autoFocus（選擇性）：選擇頁面是否自動捲動至新建立的視覺效果（預設設為 'True'）。

  2. 使用下列方法來建立視覺效果：

    createVisual(visualType: string, layout?: models.IVisualLayout, autoFocus?: boolean): Promise<models.ICreateVisualResponse>

傳回的值包含物件，表示新建立的視覺效果。 您可以使用 視覺化資料系結 和 視覺效果屬性 API，根據您的需求編輯視覺效果。

例如：

let createVisualResponse = await page.createVisual('areaChart');
let visual = createVisualResponse.visual;

程式代碼範例

下列程式代碼範例示範如何使用不同的參數建立視覺效果。

注意

如需建立自訂版面配置的相關信息，請參閱 Visual layout。

建立具有自定義版面配置且沒有焦點的分區圖視覺效果。

const customLayout = {
    x: 20,
    y: 35,
    width: 1600,
    height: 1200
}

let createVisualResponse = await page.createVisual('areaChart', customLayout, false /* autoFocus */);

建立具有預設版面配置的分區圖。

let createVisualResponse = await page.createVisual('areaChart');

可用的現用視覺效果類型

  • actionButton

  • areaChart

  • barChart

  • basicShape

  • 卡

  • clusteredBarChart

  • clusteredColumnChart

  • columnChart

  • debugVisual

  • 分解樹狀結構

  • donutChart

  • esriVisual

  • filledMap

  • 漏鬥

  • 軌距

  • hundredPercentStackedBarChart

  • hundredPercentStackedColumnChart

  • 圖像

  • keyDriversVisual

  • kpi

  • lineChart

  • lineClusteredColumnComboChart

  • lineStackedColumnComboChart

  • 地圖

  • multiRowCard

  • pieChart

  • pivotTable

  • PowerApps

  • pythonVisual

  • qnaVisual

  • ribbonChart

  • scatterChart

  • scriptVisual

  • shapeMap

  • 切片機

  • stackedAreaChart

  • tableEx

  • 文字框

  • treemap

  • 瀑布圖

考慮和限制

只有在轉譯報表之後，才能使用可視化建立 API。 只有在呼叫報表之後，才能接聽報表 rendered 事件並觸發可視化撰寫 API。 如需詳細資訊，請參閱 事件處理。

相關內容