Freigeben über

Erstellen eines visuellen Elements

  • Artikel

Diese API bietet eine Möglichkeit zum Erstellen eines neuen visuellen Elements auf einer Berichtsseite.

Erstellen eines visuellen Elements und Binden an Daten

Erstellen Sie ein leeres visuelles Element eines bestimmten Typs, und binden Sie das visuelle Element dann an Datenfelder. Eine Liste der visuellen Typen finden Sie unter vordefinierten visuellen Typen.

Anmerkung

Visuals, die nicht im Visualisierungsbereich installiert sind, können einem Bericht nicht hinzugefügt werden. Dies gilt sowohl für benutzerdefinierte visuelle Elemente, die nicht installiert sind, als auch für vordefinierte visuelle Elemente, die deinstalliert wurden.

  1. Konfigurieren Sie das visuelle Element, das Sie erstellen möchten, mithilfe der folgenden Parameter:

    • Visueller Typ: Der Typ des visuellen Elements, das Sie erstellen möchten, z. B. eine barChart.
    • Layout (optional): Das layout, das auf das neue visuelle Element angewendet werden soll.
    • autoFocus (optional): Wählen Sie aus, ob die Seite automatisch zum neu erstellten visuellen Element scrollt (standardmäßig auf "True" festgelegt).

  2. Verwenden Sie die folgende Methode, um ihr visuelles Element zu erstellen:

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

Der zurückgegebene Wert enthält ein Objekt, das das neu erstellte visuelle Element darstellt. Sie können die visuelle Datenbindung und visuellen Eigenschaften APIs verwenden, um das visuelle Element entsprechend Ihren Anforderungen zu bearbeiten.

Zum Beispiel:

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

Codebeispiele

Die folgenden Codebeispiele zeigen, wie Visuelle Elemente mit unterschiedlichen Parametern erstellt werden.

Anmerkung

Informationen zum Erstellen benutzerdefinierter Layouts finden Sie unter visuellen Layout-.

Erstellen Sie ein Flächendiagramm mit einem benutzerdefinierten Layout und keinen Fokus.

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

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

Erstellen Sie ein Flächendiagramm mit einem Standardlayout.

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

Verfügbare out-of-the-box visuelle Typen

  • actionButton

  • areaChart

  • barChart

  • basicShape

  • Karte

  • clusteredBarChart

  • clusteredColumnChart

  • columnChart

  • debugVisual

  • Analysebaum

  • donutChart

  • esriVisual

  • filledMap

  • Trichter

  • Messgerät

  • hundredPercentStackedBarChart

  • hundredPercentStackedColumnChart

  • Bild

  • keyDriversVisual

  • kpi

  • lineChart

  • lineClusteredColumnComboChart

  • lineStackedColumnComboChart

  • Landkarte

  • multiRowCard

  • pieChart

  • pivotTable

  • PowerApps

  • pythonVisual

  • qnaVisual

  • ribbonChart

  • Punktdiagramm

  • scriptVisual

  • shapeMap

  • Schneidemaschine

  • stackedAreaChart

  • tableEx

  • Textfeld

  • treemap

  • wasserfallChart

Überlegungen und Einschränkungen

Visuelle Erstellungs-APIs sind erst verfügbar, nachdem der Bericht gerendert wurde. Überwachen Sie den Bericht rendered Ereignis, und lösen Sie visuelle Erstellungs-APIs erst nach dem Aufruf aus. Weitere Informationen finden Sie unter Ereignisbehandlung.

Verwandte Inhalte