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:

  1. Välj Komponenter från sidan med den interaktiva kommunikationslösningen.

  2. 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
  3. Markera diagramkomponenten i redigeraren för interaktiv kommunikation och välj Configure ( configure_icon ) 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 utskriftskanal

    Grundläggande egenskaper för ett linjediagram i en webbkanal

    Grundläggande egenskaper för ett linjediagram i en webbkanal

  4. Konfigurera diagramegenskaper baserat på kanaltypen.

  5. (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.

    chart_agentproperties

  6. Välj ready_icon 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:

Fält
Beskrivning
Kanaltyp
Namn
Identifierare för diagramelementet. Namnet på diagrammet som anges i det här fältet visas inte i diagrammet. Den används när den refererar till elementet från andra komponenter, skript och SOM-uttryck.
Tryck och webb
Diagramtyp
Typ av diagram som du vill generera. De tillgängliga alternativen är Cirkel, Kolumn, Donut, Stapel, Linje, Punkt, Punkter och Yta.
Tryck och webb
Serier > Flera serier
Välj det här alternativet om du vill lägga till flera serier för formulärdatamodellens samlingsobjekt som ritats på X- och Y-axeln.
Tryck och webb
Series > Data Model Object
Namnet på den formulärdatamodellsamling som du vill lägga till flera serier i diagrammet.
Välj en överordnad objektegenskap för formulärdatamodellen för egenskaperna ritade på X-axeln och Y-axeln för att skapa en meningsfull serie. Datamodellobjektet som du binder måste vara av typen Number, String eller Date.
Tryck och webb
Visa staplade
Markera om du vill stapla värdena för varje serie ovanpå varandra.
Tryck och webb
X-axel > Titel
X-axelns namn.
Tryck och webb
X-axel > Datamodellsobjekt

Namnet på det formulärdatamodellsamlingsobjekt som ska ritas på X-axeln.

Välj två samlings-/arraytypegenskaper för samma överordnade datamodellsobjekt som är meningsfulla i förhållande till varandra för att rita på X- och Y-axeln i ett diagram. Datamodellobjektet som du binder måste vara av typen Number, String eller Date.

Tryck och webb
Y-axel > Titel
Y-axelns namn.
Tryck och webb
Y-axel > Datamodellsobjekt

Samlingsobjekt för formulärdatamodell som ska ritas på Y-axeln. I utskriftskanalen ska datamodellobjektet för Y-axeln vara av typen Number.

Välj två samlings-/arraytypegenskaper för samma överordnade datamodellsobjekt som är meningsfulla i förhållande till varandra för att rita på X- och Y-axeln i ett diagram.

Tryck och webb
Y-axel > Funktion
Statistisk/anpassad funktion som används för att beräkna värdena på y-axeln.
Tryck och webb
Dölj objekt
Välj det här alternativet om du vill dölja diagrammet i det slutliga resultatet.
Tryck och webb
Titel
Diagrammets namn.
Skriv ut
Höjd
Diagrammets höjd i pixlar.
Skriv ut
Bredd
Diagrammets bredd i pixlar. Du kan styra diagrammets bredd i webbkanalen med hjälp av stillagret eller genom att använda ett tema.
Skriv ut
Obligatorisk sidbrytning före
Välj det här alternativet om du vill lägga till en obligatorisk sidbrytning före diagrammet och placera diagrammet överst på en ny sida.
Skriv ut
Obligatorisk sidbrytning efter
Välj det här alternativet om du vill lägga till en obligatorisk sidbrytning efter diagrammet och placera innehållet efter diagrammet överst på en ny sida.
Skriv ut
Indrag
Diagrammets indrag från sidans vänstra kant.
Skriv ut
Verktygstips

Det format som verktygstipset visas i när användaren för musen över en datapunkt i diagrammet i webbkanalen. Standardvärdet är ${x}(${y}). Beroende på diagramtyp kan variablerna ${x}och ${y} ersätts dynamiskt med motsvarande värden på X-axeln och Y-axeln och visas i verktygstipset.

Om du vill inaktivera verktygstipset lämnar du Verktygstips fältet är tomt. Det här alternativet gäller inte för linjediagram och ytdiagram. Se till exempel Exempel 1: Diagramutdata för tryck och webb.

Webb
Diagramspecifika konfigurationer

Förutom vanliga konfigurationer finns följande diagramspecifika konfiguration tillgänglig:

  • Visa förklaring: Visar en förklaring för cirkeldiagrammet eller mundiagrammet när det är aktiverat.
  • Förklaringens position: Anger förklaringens position i förhållande till diagrammet. De tillgängliga alternativen är Höger, Vänster, Upptill och Nedtill. Använd den högra teckenförklaringen i utskriftskanalen.
  • Innerradie: Finns för Donut-diagram för att ange radien (i pixlar) för den inre cirkeln i diagrammet.
  • Linjefärg: Finns för linjediagram, linjediagram, punktdiagram och ytdiagram för att ange linjefärgen i diagrammet.
  • Punktfärg: Tillgängligt för punkttecken, linjer och punkter för att ange färg för punkterna i diagrammet.
  • Områdesfärg: Tillgängligt för ytdiagram för att ange färgen för området under linjen i diagrammet.
  • Referenspunkt > Bindningstyp: Finns för Quadrant-diagram till Ange bindningstypen för referenspunkten. Använd den statiska text- eller datamodellens objektegenskap för att definiera värdet för referenspunkten.
  • Referenspunkt > X-axel: Tillgängligt för kvadrantdiagram om du väljer Statisk i listrutan Bindningstyp för att ange X-axelvärdet för referenspunkten.
  • Referenspunkt > Y-axel: Tillgängligt för kvadrantdiagram om du väljer Statisk i listrutan Bindningstyp för att ange Y-axelvärdet för referenspunkten.
  • Referenspunkt > Datamodellobjekt för serie: Tillgängligt för kvadrantdiagram med flera serier om du väljer Datamodellsobjekt i listrutan Bindningstyp. Definiera objektegenskapen för formulärdatamodellen för att identifiera serien för referenspunkten.
  • Referenspunkt > Datamodellobjektvärde för serie: Tillgängligt för kvadrantdiagram med flera serier om du väljer Datamodellsobjekt i listrutan Bindningstyp. Använd objektegenskapen för formulärdatamodellen för serie och det värde som definieras i det här fältet för att identifiera serien för referenspunkten.
  • Referenspunkt > Datamodellobjekt för referenspunkt: Tillgängligt för kvadrantdiagram om du väljer Datamodellsobjekt i listrutan Bindningstyp. Definiera en objektegenskap för formulärdatamodellen som är jämställd med egenskaperna som ritas på X- och Y-axeln. För flera serier definierar du dessutom en datamodellsobjektegenskap som är en underordnad enhet till datamodellens objektegenskap som definierats för serien.
  • Referenspunkt > Datamodellobjektvärde för referenspunkt: Tillgängligt för kvadrantdiagram om du väljer Datamodellsobjekt i listrutan Bindningstyp. Använd objektegenskapen för formulärdatamodellen som referenspunkt och det värde som definieras i det här fältet för att identifiera referenspunkten för diagrammet.
    Quadrant Labels > Top Left: Finns för kvadrantdiagram för att ange namnet på den övre vänstra kvadranten.
  • Quadrant Labels > Top Right: Finns för kvadrantdiagram för att ange namnet på den övre högra kvadranten.
  • Quadrant Labels > Bottom Right: Finns för kvadrantdiagram för att ange namnet på den nedre högra kvadranten.
  • Quadrant Labels > Bottom Left: Finns för kvadrantdiagram för att ange namnet på den nedre vänstra kvadranten.
Tryck och webb

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.

Funktioner i diagram

Ä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:

  1. 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.

  2. 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 som fd/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.

  3. 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

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

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

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.

Summa för linjediagram

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.

Diagramfrekvens

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.

Kvadrantdiagram

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2