ビジュアルを作成する

この 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;

コード例

次のコード例は、さまざまなパラメーターを使用してビジュアルを作成する方法を示しています。

カスタム レイアウトでフォーカスのない面グラフ ビジュアルを作成します。

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

• waterfallChart

考慮事項と制限事項

ビジュアル作成 API は、レポートの表示後にのみ使用できます。 イベント rendered レポートをリッスンし、呼び出された後にのみビジュアル作成 API をトリガーします。 詳細については、「イベント処理」を参照してください。

関連コンテンツ

• ビジュアルの種類の を変更する
• データ フィールドの構成
• ビジュアル プロパティの書式設定