Adaptiva formulärdiagram af-charts

Ett diagram eller diagram är en visuell representation av data. Det gör att ni kan komprimera stora mängder information till ett lättbegripligt visuellt format, vilket gör att ni bättre kan visualisera, tolka och analysera komplexa data.
AEM Forms tilläggspaket innehåller en färdig diagramkomponent. Du kan använda i dina adaptiva formulär och dokument för visuell representation av tvådimensionella data i upprepningsbara paneler och tabeller. Med diagramkomponenten kan du lägga till och konfigurera följande typer av diagram:

Diagramkomponenten stöder och tillhandahåller inbyggda statistiska funktioner - summa, medel, maximum, minimum, mode, media, intervall och frekvens - för att beräkna och rita värden i ett diagram. Förutom de funktioner som finns färdiga kan du skriva egna funktioner och göra dem tillgängliga för användning i diagram.

Nu ska vi titta på hur du lägger till och konfigurerar diagramkomponenten:

Lägg till diagram add-chart

Diagramkomponenten är som standard tillgänglig AEM sidofältet. Du kan dra och släppa diagramkomponenten från AEM sidofältet till det anpassade formuläret eller dokumentet i redigeringsläget. När du släpper komponenten skapas en platshållare för ett diagram.

Konfigurera diagram configure-chart

Om du vill konfigurera diagrammet klickar du på diagramkomponenten och sedan på för att öppna dialogrutan Redigera diagram. Dialogrutan innehåller flikarna Rubrik och text, Konfiguration, Avancerade alternativ och Format som du kan använda för att konfigurera diagrammet.

Grundläggande basic

På fliken Grundläggande kan du konfigurera följande egenskaper:

Konfiguration configuration

På fliken Grundläggande definierar du vilken typ av diagram, källpanel eller tabellrad som innehåller data, vilka värden som ska ritas på X- och Y-axeln i diagrammet och eventuellt den statistiska funktionen för att beräkna värdena för att rita i diagrammet.

Låt oss i detalj förstå informationen som visas på den här fliken, med hjälp av ett exempel på en repeterbar tabell i en kreditkortssats. Tänk på att du vill generera ett diagram som avbildar och korrelerar den totala kostnaden i olika kategorier i avsnittet med kontoutdrag i en kreditkortsutdrag, vilket visas nedan.

För att uppnå detta måste du rita upp kategorier på X-axeln och på Y-axeln rita upp de totala utgifterna i varje kategori.

Kreditkortsutdraget som används i det här exemplet är ett adaptivt formulärdokument och avsnittet med utdragsinformation är en tabell som ser ut så här i redigeringsläget.

Låt oss titta på följande krav och villkor för att generera diagrammet:

Förklaringen och verktygstipset visas så här.

Stilar styling

I formateringsläget kan du ange diagrammets bredd i procent av den totala bredden i formuläret eller dokumentet och dess höjd i pixlar. Andra alternativ är text, bakgrund, kant, effekter och CSS-åsidosättningar.

Gå till verktygsfältet för sidan och tryck>>Format om du vill växla till formateringsläge.

Använda funktioner i diagram use-functions

Du kan konfigurera ett diagram så att statistiska funktioner används för att beräkna värden från källdata för plottning i diagrammet. Även om diagramkomponenten har vissa inbyggda funktioner kan du skriva egna funktioner och göra dem tillgängliga för användning i diagramkonfigurationen.

Standardfunktioner default-functions

Följande funktioner är tillgängliga som standard med komponenten Chart:

Anpassade funktioner custom-functions

Förutom att använda standardfunktionerna i diagram kan du skriva anpassade funktioner i JavaScript och göra dem tillgängliga i listan med funktioner i diagramkomponenten.

En funktion tar en eller flera matriser och ett kategorinamn som indata och returnerar ett värde. Till exempel:

Multiply(valueArray, category) {
    var val = 1;
    _.each(valueArray, function(value) {
        val = val * value;
    });
    return val;
}

När du har skrivit en anpassad funktion gör du följande för att göra den tillgänglig för användning i diagramkonfigurationen:

Uppdatera diagram automatiskt auto-refresh-chart

Ett diagram uppdateras automatiskt när användare gör något av följande:

Använd diagramtyp i anpassade formulärregler chart-in-rules

Egenskapen chartType anger diagramtypen. Möjliga värden är tårta, munstycke, streck, linje, linjepunkt, punkt och område. Det är en skriptbar egenskap, vilket betyder att du kan använda den i adaptiva formulärregler för att ändra diagramkonfigurationer. Låt oss förstå det med hjälp av ett exempel.

Tänk på att du har konfigurerat ett stapeldiagram. Men du vill också att användarna ska kunna välja en annan diagramtyp i listrutan och rita om diagrammet. Du kan göra detta med egenskapen chartType i en regel enligt följande:

Nu kan du välja en diagramtyp i listrutan och klicka på Uppdatera för att rita om diagrammet.