Använda diagram i interaktiv kommunikation using-charts-in-interactive-communications
Ett diagram eller diagram är en visuell representation av data. Det komprimerar stora mängder information till ett lättbegripligt visuellt format, vilket gör det möjligt för mottagarna av interaktiv kommunikation att bättre visualisera, tolka och analysera komplexa data.
När du skapar en interaktiv kommunikation kan du lägga till diagram som visuellt representerar tvådimensionella data från datamodellen i den interaktiva kommunikationen. Med diagramkomponenten kan du lägga till och konfigurera följande typer av diagram: Cirkel, Kolumn, Ring, Stapel, Linje, Punkt, Punkt, Yta och Kvadrant.
Lägga till och konfigurera diagram i en interaktiv kommunikation add-and-configure-chart-in-an-interactive-communication
Utför följande steg för att lägga till och konfigurera ett diagram i en interaktiv kommunikation:
-
Välj Komponenter från sidan med den interaktiva kommunikationslösningen.
-
Dra och släpp Diagram till någon av följande komponenter:
- Utskriftskanal: Målområde eller bildfält
- Webbkanal: Panel- eller målområde
-
Markera diagramkomponenten i redigeraren för interaktiv kommunikation och välj Configure ( ) i komponentverktygsfältet.
Diagramegenskaperna visas i den vänstra rutan.
Grundläggande egenskaper för ett linjediagram i en utskriftskanal
Grundläggande egenskaper för ett linjediagram i en webbkanal
-
Konfigurera diagramegenskaper baserat på kanaltypen.
-
(Endast utskriftskanal) I dialogrutan Agent Settings anger du om agenten måste använda det här diagrammet. Om i t Is Mandatory For the Agent To Use This Chart om alternativet inte är markerat kan agenten välja ögonikonen för diagrammet i Content för att visa eller dölja diagrammet.
-
Välj om du vill spara diagramegenskaperna.
Välj Preview för att visa utseendet och data som är kopplade till diagrammet. Välj Edit om du vill konfigurera om diagrammets egenskaper.
Konfigurera diagramegenskaper configure-chart-properties
Konfigurera följande egenskaper när du skapar diagram för tryck- och webbkanaler:
Använda funktioner i diagram use-functions-in-chart
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. Genom att använda funktioner i ett diagram kan du rita data som inte tillhandahålls direkt av formulärdatamodellen.
Även om diagramkomponenten innehåller vissa inbyggda funktioner kan du skriva anpassade funktioner och göra dem tillgängliga för användning i diagramkonfigurationen i webbkanalen.
Följande funktioner är tillgängliga som standard med komponenten Chart:
Medel (medel) Returnerar medelvärdet av värdena på X- eller Y-axeln för ett givet värde på den andra axeln.
Summa Returnerar summan av alla värden på X- eller Y-axeln för ett givet värde på den andra axeln.
Maximal Returnerar det maximala värdet på X- eller Y-axeln för ett givet värde på den andra axeln.
Frekvens Returnerar antalet värden på X- eller Y-axeln för ett givet värde på den andra axeln.
Intervall Returnerar skillnaden mellan det högsta och det lägsta värdet på X- eller Y-axeln för ett givet värde på den andra axeln.
Median Returnerar det värde som skiljer högre och lägre värden i halva X- eller Y-axeln från varandra för ett givet värde på den andra axeln.
Minimum Returnerar det minsta värdet på X- eller Y-axeln för ett givet värde på den andra axeln.
Läge Returnerar värdet med de flesta förekomster på X- eller Y-axeln för ett givet värde på den andra axeln.
Mer information finns i Exempel 2: Användning av summerings- och frekvensfunktioner i ett linjediagram.
Anpassade funktioner i webbkanalen customfunctionsweb
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 för webbkanalen.
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:
-
Lägg till den anpassade funktionen i klientbiblioteket som är kopplad till den relevanta interaktiva kommunikationen. Mer information finns i Konfigurera åtgärden Skicka och Använda bibliotek på klientsidan.
-
Om du vill visa den anpassade funktionen i listrutan Funktion skapar du en
nt:unstructured
i appmappen med följande egenskaper:-
Lägg till egenskap
guideComponentType
med värdet somfd/af/reducer
. (obligatoriskt) -
Lägg till egenskap
value
till ett fullständigt namn på den anpassade JavaScript™-funktionen. (obligatoriskt) och ange dess värde till namnet på den anpassade funktionen, till exempel Multiplicera. -
Lägg till egenskap
jcr:description
med det värde som du vill visa som namnet på den anpassade funktionen som visas i listrutan Funktion. Till exempel: Multiplicera. -
Lägg till egenskap
qtip
med ett värde som är en kort beskrivning av den anpassade funktionen. Det visas som ett verktygstips när du håller pekaren över funktionsnamnet i Funktion listruta.
-
-
Klicka Spara alla för att spara konfigurationen.
Funktionen kan nu användas i diagrammet.
Exempel 1: Diagramutdata för tryck och webb chartoutputprintweb
På fliken Grundläggande definierar du diagramtyp, egenskaper för källformulärdatamodellen som innehåller data, etiketter som ska ritas på X- och Y-axeln i diagrammet och eventuellt statistikfunktionen för att beräkna värdena för att rita i diagrammet.
Låt oss i detalj förstå vilken information som minst krävs i grundläggande egenskaper, med hjälp av en kortsats som skapats med en interaktiv kommunikation. Tänk på att du vill generera ett diagram som avbildar beloppet för olika utgifter i utdraget. Du vill använda olika typer av diagram för utskrift och webb i den interaktiva kommunikationen.
Kolumndiagram för utskrift columnchartprint
För att uppnå detta anger du följande egenskaper:
- Name - Ange diagrammets namn.
- Chart Type - Välj Kolumn i listrutan.
- Title - Ange utgiftstyp för X-axeln och Transaktionsbelopp för Y-axeln.
- Data Model Objects - Välj datamodellens objektegenskaper för att skapa databindningar för X-axeln (Utgiftstyp) och Y-axeln (Transaktionsmängd).
Kolumndiagram i tryckkanaler i en interaktiv kommunikation
Ringdiagram för webben donutchartweb
För att uppnå detta anger du följande egenskaper:
- Name - Ange diagrammets namn.
- Chart Type - Välj Donut i listrutan.
- Data Model Objects - Välj datamodellens objektegenskaper för att skapa databindningar för X-axeln (Utgiftstyp) och Y-axeln (Transaktionsmängd).
- Inner Radius - Ange innerradievärdet som 150 för att ange radien (i pixlar) för den inre cirkeln i diagrammet.
- Tooltip - Använd ${x}(${y}) standardformat för att visa verktygstipset. Verktygstipset visas som: Utgiftstyp (transaktionsbelopp). Exempel: Debit för Bitmynt (10000).
Ringdiagram i webbkanalen i en interaktiv kommunikation
Exempel 2: Användning av summerings- och frekvensfunktioner i ett linjediagram applicationsumfrequency
Genom att använda funktioner i ett diagram kan du rita data som inte tillhandahålls direkt av formulärdatamodellen. I det här exemplet använder vi ett kreditkortsexempel för att förstå hur summerings- och frekvensfunktioner kan användas i diagrammet.
Linjediagram utan en funktion med två"Debit for AirBnB"-transaktioner
Summeringsfunktion sum-function
Du kan använda summafunktionen för att lägga till värden för flera instanser av samma dataegenskap och bara visa den en gång. I följande diagram används funktionen Sum på Y-axeln för att lägga till beloppet för de två Debit för AirBnB-transaktioner (2050 och 1050) och bara visa en transaktion (3100).
Summeringsfunktionen kan göra diagrammet mer användbart när du vill sortera och visa summan för många förekomster av samma dataegenskap.
Funktionen Frekvens frequency-function
Funktionen Frequency returnerar antalet Y-axelvärden för ett givet värde på den andra axeln. När funktionen Frekvens används på Y-axeln (transaktionsbelopp) visar diagrammet att det finns två förekomster av Debit för AirBnB-transaktioner och en förekomst av de övriga transaktionstyperna.
Exempel 3: Flerseriskvadrantdiagram i webben example-multi-series-quadrant-chart-in-web
Diagrammet visar beloppet för transaktioner som utförts i ett visst datumintervall. I kvadrantdiagrammet kan du dela upp diagramområdet i fyra märkta avsnitt. Tecknet använder en statisk referenspunkt för X-axeln och Y-axeln. Använd funktionen för flera serier för att dela upp data baserat på bankens namn.
För att uppnå detta anger du följande egenskaper:
-
Namn: Ange diagrammets namn.
-
Diagramtyp: Välj Kvadrant i listrutan.
-
Välj Flera serier kryssrutan.
-
Datamodellsobjekt: Ange datamodellens objektegenskap för serien. Datamodellens objektegenskap för banknamnet är överordnad datamodellens objektegenskaper som ritas i X-axeln och Y-axeln.
-
Datamodellsobjekt: Markera datamodellens objektegenskaper för att skapa databindningar för X-axeln (transaktionsdatum) och Y-axeln (transaktionsmängd).
-
I Referenspunkt avsnitt, markera Statisk som bindningstyp.
-
Ange värdena för referenspunkterna X-axel och Y-axel.
-
Ange kvadrantetiketterna för kvadranterna längst upp till vänster, uppe till höger, nere till höger och nere till vänster.
-
Välj Visa teckenförklaringar om du vill visa färgkoderna för banknamnen.