Udostępnij za pośrednictwem

Tworzenie wizualizacji

  • Artykuł

Ten interfejs API umożliwia utworzenie nowej wizualizacji na stronie raportu.

Jak utworzyć wizualizację i powiązać ją z danymi

Utwórz pustą wizualizację określonego typu, a następnie powiąż wizualizację z polami danych. Aby uzyskać listę typów wizualizacji, zobacz gotowe typy wizualizacji.

Nuta

Wizualizacje, które nie są zainstalowane w okienku wizualizacji, nie można dodać do raportu. Dotyczy to zarówno wizualizacji niestandardowych, które nie są zainstalowane, jak i nieuwzględniane wizualizacje, które zostały odinstalowane.

  1. Skonfiguruj wizualizację, którą chcesz utworzyć, używając następujących parametrów:

    • Typ wizualizacji: typ wizualizacji, którą chcesz utworzyć, na przykład barChart.
    • układ (opcjonalny): układ, który ma zostać zastosowany do nowej wizualizacji.
    • autofokus (opcjonalnie): wybierz, czy strona automatycznie przewija się do nowo utworzonej wizualizacji (domyślnie ustawiona na wartość True).

  2. Użyj następującej metody, aby utworzyć wizualizację:

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

Zwrócona wartość zawiera obiekt reprezentujący nowo utworzoną wizualizację. Możesz użyć powiązania danych wizualizacji i właściwości wizualizacji interfejsów API, aby edytować wizualizację zgodnie z potrzebami.

Na przykład:

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

Przykłady kodu

W poniższych przykładach kodu pokazano, jak tworzyć wizualizacje z różnymi parametrami.

Nuta

Aby uzyskać informacje na temat tworzenia układów niestandardowych, zobacz Układ wizualizacji.

Utwórz wizualizację wykresu warstwowego z niestandardowym układem i bez fokusu.

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

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

Utwórz wykres warstwowy z układem domyślnym.

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

Dostępne gotowe typy wizualizacji

  • actionButton

  • wykres warstwowy

  • wykres słupkowy

  • basicShape

  • karta

  • wykres clusteredBarChart

  • clusteredColumnChart

  • columnChart

  • debugowanieVisual

  • Drzewo dekompozycji

  • wykres pierścieniowy

  • esriVisual

  • kartogram

  • lejek

  • miernik

  • setPercentStackedBarChart

  • hundredPercentStackedColumnChart

  • obraz

  • keyDriversVisual

  • wskaźnik kpi

  • lineChart

  • lineClusteredColumnComboChart

  • lineStackedColumnComboChart

  • mapa

  • multiRowCard

  • wykres kołowy

  • Tabela przestawna

  • PowerApps

  • pythonVisual

  • qnaVisual

  • wstążkaArt

  • wykres punktowy

  • scriptVisual

  • shapeMap

  • krajalnica

  • stackedAreaChart

  • tableEx

  • pole tekstowe

  • mapa drzewa

  • wykres kaskadowy

Zagadnienia i ograniczenia

Interfejsy API tworzenia wizualizacji są dostępne tylko po renderowaniu raportu. Nasłuchiwanie w raporcie rendered zdarzenia i wyzwalanie interfejsów API tworzenia wizualizacji dopiero po jego wywołaniu. Aby uzyskać więcej informacji, zobacz Obsługa zdarzeń.

Powiązana zawartość