Het gebruiken van grafieken in Interactieve Communicatie using-charts-in-interactive-communications

Een grafiek of grafiek is een visuele weergave van gegevens. Het versleept grote hoeveelheden informatie in gemakkelijk-aan-begrijpelijke visuele formaat, toelatend de ontvangers van de Interactieve Mededeling om complexe gegevens beter te visualiseren, te interpreteren en te analyseren.

Terwijl het creëren van een Interactieve Communicatie, kunt u grafieken toevoegen om tweedimensionale gegevens van het de vormgegevensmodel van de Interactieve Communicatie visueel te vertegenwoordigen. Met de component Diagram kunt u de volgende typen grafieken toevoegen en configureren: Schijf, Kolom, Donut, Staaf, Lijn, Lijn en Punt, Punt, Gebied en Kwadrant.

Voeg en vorm grafiek in een Interactieve Communicatie toe add-and-configure-chart-in-an-interactive-communication

Voer de volgende stappen uit om een grafiek in een Interactieve Mededeling toe te voegen en te vormen:

  1. Selecteer Componenten van het hulpje van de Interactieve Communicatie.

  2. Sleep en laat vallen de component van de Grafiek aan één van de volgende componenten:

    • Kanaal afdrukken: doelgebied of afbeeldingsveld
    • Webkanaal: Deelvenster of Doelgebied
  3. Selecteer de grafiekcomponent in de Interactieve Communicatie redacteur en selecteer Configure ( configure_icon ) van de toolbar van de Component.

    De grafiekeigenschappen worden in het linkerdeelvenster weergegeven.

    Basis eigenschappen van een grafiek van het lijntype in drukkanaal

    Basiseigenschappen van een lijntekstdiagram in een afdrukkanaal

    Basis eigenschappen van een grafiek van het lijntype in Webkanaal

    Basiseigenschappen van een lijntekstdiagram in een webkanaal

  4. Vorm de grafiekeigenschappendie op het kanaaltype worden gebaseerd.

  5. (Alleen kanaal afdrukken) Geef in de Agent Settings op of de agent dit diagram moet gebruiken. Als i t Is Mandatory For the Agent To Use This Chart optie niet wordt geselecteerd, kan de agent het oogpictogram voor de grafiek in het Content lusje van de UI van de Agent selecteren om de grafiek te tonen of te verbergen.

    chart_agentproperties

  6. Selecteer done_icon om de grafiekeigenschappen te bewaren.

    Selecteer Preview om de weergave en de gegevens weer te geven die aan het diagram zijn gekoppeld. Selecteer Edit om de eigenschappen van het diagram opnieuw te configureren.

Eigenschappen van diagram configureren configure-chart-properties

Configureer de volgende eigenschappen tijdens het maken van grafieken voor afdrukken en webkanalen:

Veld
Beschrijving
Kanaaltype
Naam
Identifier voor het grafiekelement. De naam van het diagram dat in dit veld is opgegeven, is niet zichtbaar in het diagram. Het wordt gebruikt wanneer het verwijzen naar het element van andere componenten, manuscripten, en uitdrukkingen SOM.
Afdrukken en web
Type diagram
Type diagram dat u wilt genereren. De beschikbare opties zijn Schijf, Kolom, Donut, Bar, Lijn, Lijn en Punt, Punt, en Gebied.
Afdrukken en web
Reeks > Meerdere reeksen
Selecteer deze optie om meerdere reeksen toe te voegen voor de verzamelingsitems van het formuliergegevensmodel die zijn uitgezet op de X- en Y-as.
Afdrukken en web
Reeks > Gegevensmodelobject
Naam van het de inzamelingspunt van het model van vormgegevens om veelvoudige reeksen aan de grafiek toe te voegen.
Kies een objecteigenschap van het bovenliggende formuliergegevensmodel voor de eigenschappen die op de X-as en Y-as zijn getekend om een betekenisvolle reeks te vormen. Het gegevensmodelobject dat u koppelt, moet van het type Number, String of Date zijn.
Afdrukken en web
Gestapeld tonen
Selecteer deze optie om de waarden van elke reeks boven op elkaar te plaatsen.
Afdrukken en web
X-as > Titel
Titel voor de X-as.
Afdrukken en web
X-as > Gegevensmodelobject

Naam van het gegevensmodel van het formulier dat moet worden getekend op de X-as.

Kies twee eigenschappen voor verzamel-/arraytype van hetzelfde bovenliggende gegevensmodelobject die van betekenis zijn ten opzichte van elkaar om te plotten op de X- en Y-as van een grafiek. Het gegevensmodelobject dat u koppelt, moet van het type Number, String of Date zijn.

Afdrukken en web
Y-as > Titel
Titel voor de Y-as.
Afdrukken en web
Y-as > Gegevensmodelobject

Verzamelingsitem van formuliergegevensmodel dat moet worden getekend op Y-as. In het kanaal van de Druk, zou het gegevensmodelvoorwerp voor de y-as van het type van Aantal moeten zijn.

Kies twee eigenschappen voor verzamel-/arraytype van hetzelfde bovenliggende gegevensmodelobject die van betekenis zijn ten opzichte van elkaar om te plotten op de X- en Y-as van een grafiek.

Afdrukken en web
Y-as > Functie
Statistische/aangepaste functie die moet worden gebruikt voor het berekenen van de waarden op y-as.
Afdrukken en web
Object verbergen
Selecteer deze optie om het diagram in de uiteindelijke uitvoer te verbergen.
Afdrukken en web
Titel
Titel van het diagram.
Afdrukken
Hoogte
Hoogte van het diagram in pixels.
Afdrukken
Breedte
Breedte van het diagram in pixels. U kunt de breedte van het diagram in het webkanaal bepalen met behulp van de stijllaag of door een thema toe te passen.
Afdrukken
Verplicht pagina-einde voor
Selecteer deze optie om een verplicht pagina-einde toe te voegen vóór het diagram en het diagram boven op een nieuwe pagina te plaatsen.
Afdrukken
Verplicht pagina-einde na
Selecteer deze optie om een verplicht pagina-einde toe te voegen na het diagram en de inhoud te volgen op het diagram boven aan een nieuwe pagina.
Afdrukken
Inspringing
Inspringing van het diagram links op de pagina.
Afdrukken
Knopinfo

Indeling waarin de knopinfo wordt weergegeven op de muis boven een gegevenspunt in het diagram in het webkanaal. De standaardwaarde is $ {x} ($ {y}). Afhankelijk van het grafiektype, wanneer u de muis op een punt, bar, of plak in de grafiek richt, worden variabelen $ {x} en $ {y} dynamisch vervangen met de overeenkomstige waarden op x-as en y-as en getoond in tooltip.

Om hulpmiddeluiteinde onbruikbaar te maken, verlaat Tooltip veld leeg. Deze optie is niet van toepassing op lijnen en vlakgrafieken. Bijvoorbeeld, zie Voorbeeld 1: De output van de grafiek in druk en Web.

Web
Diagramspecifieke configuraties

Naast gemeenschappelijke configuraties, zijn de volgende grafiek-specifieke configuratie beschikbaar:

  • toon legenda: toont een legenda voor de taart of donutgrafiek wanneer toegelaten.
  • positie van de Legenda: specificeert de positie van de legenda met betrekking tot de grafiek. De beschikbare opties zijn Rechts, Links, Boven en Onder. Gebruik de rechterlegenda in het afdrukkanaal.
  • Binnenstraal : Beschikbaar voor grafieken van de Donut om de straal (in pixel) van de binnencirkel in de grafiek te specificeren.
  • kleur van de Lijn : Beschikbaar voor de grafieken van de Lijn, van de Lijn en van het Punt, en van het Gebied om de kleur voor de lijn in de grafiek te specificeren.
  • Kleur van het Punt : Beschikbaar voor Punt en de grafieken van de Lijn en van het Punt om de kleur voor de punten in de grafiek te specificeren.
  • kleur van het Gebied : Beschikbaar voor de grafieken van het Gebied om de kleur voor het gebied onder de lijn in de grafiek te specificeren.
  • Punt van het Referentie > Bindend Type: Beschikbaar voor Kwadrant grafieken aan specificeer het bindende type voor het verwijzingspunt. Gebruik statische tekst of objecteigenschap van gegevensmodel om de waarde voor het referentiepunt te definiëren.
  • Punt van het Verwijzing > x-as: Beschikbaar voor de grafieken van het Kwadrant als u Statische selecteert in de vervolgkeuzelijst Type binding om de waarde voor de X-as van het referentiepunt op te geven.
  • Punt van het Verwijzing > y-as: Beschikbaar voor de grafieken van het Kwadrant als u Statische selecteert in de vervolgkeuzelijst Type binding om de waarde voor de Y-as voor het referentiepunt op te geven.
  • Punt van het Verwijzing > Voorwerp van het Model van Gegevens voor Reeks: Beschikbaar voor veelvoudige grafieken van het reekskwadrant als u het ModelVoorwerp van Gegevens selecteert in de vervolgkeuzelijst Bindingstype. Definieer de objecteigenschap van het formuliergegevensmodel om de reeks voor het referentiepunt te identificeren.
  • Punt van het Verwijzing > de Waarde van Objecten van het Model van Gegevens voor Reeks: Beschikbaar voor veelvoudige grafieken van het reekskwadrant als u ModelVoorwerp van Gegevens selecteert in de vervolgkeuzelijst Bindingstype. Gebruik de objecteigenschap van het formuliergegevensmodel voor reeksen en de waarde die in dit veld is gedefinieerd om de reeks voor het referentiepunt te identificeren.
  • Punt van het Verwijzing > Object van het Model van Gegevens voor Punt van het Verwijzing: Beschikbaar voor Grafieken van het Kwadrant als u ModelVoorwerp van Gegevens selecteert in de vervolgkeuzelijst Bindingstype. Definieer een objecteigenschap van het formuliergegevensmodel die vergelijkbaar is met de eigenschappen die op de X- en Y-as zijn getekend. Daarnaast definieert u voor meerdere reeksen een objecteigenschap van het gegevensmodel die een onderliggende entiteit is van de objecteigenschap van het gegevensmodel die voor de reeks is gedefinieerd.
  • Punt van het Verwijzing > de Waarde van Objecten van het Model van Gegevens voor Punt van het Verwijzing: beschikbaar voor Grafieken van het Kwadrant als u ModelVoorwerp van Gegevens selecteert in de vervolgkeuzelijst Bindingstype. Gebruik de objecteigenschap van het formuliergegevensmodel voor het referentiepunt en de waarde die in dit veld is gedefinieerd om het referentiepunt voor het diagram te identificeren.
    {de Etiketten van 1} Kwadrant > Linksboven: Beschikbaar voor de grafieken van het Kwadrant om de naam voor de Linkerkwadrant van de Bovenkant te specificeren. - de Etiketten van het Kwadrant > Hoogste Rechts: Beschikbaar voor de grafieken van het Kwadrant om de naam voor het Hoogste juiste kwadrant te specificeren.- Etiketten van het Kwadrant > Rechtsonder: beschikbaar voor Grafieken van het Kwadrant om de naam voor het Hoogste kwadrant van de Onderkant te specificeren.- Etiketten van het Kwadrant > Linksonder: beschikbaar voor Grafieken van het Kwadrant om de naam voor het Linkerkwadrant van de Onderkant te specificeren.
Afdrukken en web

Functies in diagram gebruiken use-functions-in-chart

U kunt een grafiek vormen om statistische functies te gebruiken om waarden van de brongegevens voor het tekenen op de grafiek te berekenen. Door functies in een grafiek toe te passen, kunt u gegevens plotten die niet direct door het model van vormgegevens worden verstrekt.

Functies in grafieken

Terwijl de component van de Grafiek met sommige in-gebouwde functies komt, kunt u douanefunctiesschrijven en hen voor gebruik in de grafiekconfiguratie in het Webkanaal ter beschikking stellen.

De volgende functies zijn standaard beschikbaar met de component Chart:

Gemiddeld (Gemiddeld) keert het gemiddelde van de waarden op X of de as van Y voor een bepaalde waarde op de andere as terug.

Som keert de som alle waarden op X of de as van Y voor een bepaalde waarde op de andere as terug.

Maximum keert het maximum van de waarden op X of de as van Y voor een bepaalde waarde op de andere as terug.

Frequentie keert het aantal waarden op X of de as van Y voor een bepaalde waarde op de andere as terug.

Waaier keert het verschil tussen het maximum en het minimum van de waarden op X of de as van Y voor een bepaalde waarde op de andere as terug.

Mediaan keert de waarde terug die hogere en lagere waarden in de helft op X of de as van Y voor een bepaalde waarde op de andere as scheidt.

Minimum keert het minimum van de waarden op X of de as van Y voor een bepaalde waarde op de andere as terug.

de Wijze keert de waarde met de meeste voorkomen op X of de as van Y voor een bepaalde waarde op de andere as terug.

Voor meer informatie, zie Voorbeeld 2: De toepassing van Som en de functies van de Frequentie in een lijngrafiek.

Aangepaste functies in webkanaal customfunctionsweb

Naast het gebruik van de standaardfuncties in grafieken, kunt u douanefuncties in JavaScript™ schrijven en hen ter beschikking stellen in de lijst van functies in de component van de Grafiek voor Webkanaal.

Een functie neemt een array of waarden en een categorienaam als invoer en retourneert een waarde. Bijvoorbeeld:

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

Zodra u een douanefunctie hebt geschreven, doe het volgende om het voor gebruik in de grafiekconfiguratie beschikbaar te maken:

  1. Voeg de douanefunctie in de cliëntbibliotheek toe verbonden aan de relevante Interactieve Communicatie. Voor meer informatie, zie Vormend de Submit actieen Gebruikend Cliënt-Kant Bibliotheken.

  2. Als u de aangepaste functie wilt weergeven in de vervolgkeuzelijst Functie, maakt u in CRXDe Lite een knooppunt nt:unstructured in de map apps met de volgende eigenschappen:

    • Voeg eigenschap guideComponentType toe met waarde als fd/af/reducer . (verplicht)

    • Voeg eigenschap value toe aan een volledig gekwalificeerde naam van de aangepaste JavaScript™-functie. (verplicht) en de waarde ervan instellen op de naam van de aangepaste functie, zoals Vermenigvuldigen.

    • Voeg eigenschap jcr:description toe met de waarde die u wilt weergeven als de naam van de aangepaste functie die wordt weergegeven in de vervolgkeuzelijst Functie. Bijvoorbeeld, vermenigvuldigt.

    • Voeg eigenschap qtip toe met een waarde die een korte beschrijving van de aangepaste functie is. Het verschijnt als tooltip wanneer het bedekken van wijzer over de functienaam in de drop-down lijst van de Functie.

  3. Klik sparen allen om de configuratie te bewaren.

De functie is nu beschikbaar voor gebruik in de Grafiek.

Voorbeeld 1: Grafiekuitvoer in gedrukte vorm en op het web chartoutputprintweb

Op het tabblad Standaard definieert u het type grafiek, de eigenschappen van het gegevensmodel van het bronformulier die gegevens bevatten, de labels die moeten worden getekend op de X-as en Y-as van het diagram en eventueel de statistische functie die de waarden voor tekenen op het diagram berekent.

Laten we de minimaal vereiste informatie in basiseigenschappen in detail begrijpen, met behulp van een kaartinstructie die is gegenereerd met een interactieve communicatie. Bedenk dat u een grafiek wilt produceren om de hoeveelheid verschillende uitgaven in de verklaring te schilderen. U wilt verschillende soorten grafieken voor druk en Weboutput van de Interactieve Communicatie gebruiken.

Kolomdiagram voor afdrukken columnchartprint

Hiervoor geeft u de volgende eigenschappen op:

  • Name - Geef de naam voor het diagram op.
  • Chart Type - selecteer Kolom van de drop-down lijst.
  • Title - Geef het type kosten op voor de X-as en de hoeveelheid transacties voor de Y-as.
  • Data Model Objects - Selecteer de eigenschappen van het gegevensmodelobject om gegevensbindingen te maken voor de X-as (Type kosten) en de Y-as (Hoeveelheid transactie).

grafiek van de Kolom in het drukkanaal van een Interactieve Mededeling

Kolomdiagram in het afdrukkanaal van een interactieve communicatie

Donut-diagram voor web donutchartweb

Hiervoor geeft u de volgende eigenschappen op:

  • Name - Geef de naam voor het diagram op.
  • Chart Type - Selecteer Donut in de vervolgkeuzelijst.
  • Data Model Objects - Selecteer de eigenschappen van het gegevensmodelobject om gegevensbindingen te maken voor de X-as (Type kosten) en de Y-as (Hoeveelheid transactie).
  • Inner Radius - Geef de waarde voor Binnenste straal op als 150 om de straal (in pixels) van de binnenste cirkel in het diagram op te geven.
  • Tooltip - gebruik $ {x} ($ {y}) standaardformaat om tooltip te tonen. De knopinfo wordt weergegeven als: Type kosten (transactiebedrag). Voorbeeld: Debit voor bitmap (10000).

grafiek van de Donut in het Webkanaal van een Interactieve Mededeling

Donut grafiek in het Webkanaal van een Interactieve Mededeling

Voorbeeld 2: De toepassing van de functies van de Som en van de Frequentie in een lijngrafiek applicationsumfrequency

Door functies in een grafiek toe te passen, kunt u gegevens plotten die niet direct door het model van vormgegevens worden verstrekt. In dit voorbeeld, gebruiken wij een voorbeeld van de creditcardverklaring om te begrijpen hoe de functies van de Som en van de Frequentie op de grafiek kunnen worden toegepast.

grafiek van de Lijn zonder een functie met twee Debit voor transacties AirBnB

Regeldiagram zonder functie met twee "Debit for AirBnB"-transacties

Sum, functie sum-function

U kunt de functie sum toepassen om waarden van meerdere instanties van dezelfde gegevenseigenschap op te tellen en deze slechts eenmaal weer te geven. In de volgende grafiek wordt bijvoorbeeld de functie Som toegepast op de Y-as om het bedrag van de twee Debit voor AirBnB-transacties (2050 en 1050) op te tellen en slechts één transactie (3100) weer te geven.

De functie van de som kan grafiek nuttiger maken wanneer u som voor vele instanties van het zelfde gegevensbezit wilt sorteren en tonen.

de grafieksom van de Lijn

Frequentiefunctie frequency-function

De functie Frequentie retourneert het aantal waarden Y-as voor een bepaalde waarde op de andere as. Met de toepassing van de Frequentiefunctie op de Y-as (Transactiesom) toont de grafiek dat er twee exemplaren van de Debit voor AirBnB-transacties zijn geweest en één exemplaar van de rest van de soorten transacties.

frequentie van het het grafiekdiagram van de Lijn

Voorbeeld 3: Quadrant-diagram met meerdere reeksen in het web example-multi-series-quadrant-chart-in-web

De grafiek geeft een overzicht van het bedrag voor transacties die in een bepaald datumbereik worden uitgevoerd. Het diagram van het kwadrant biedt de mogelijkheid om het grafiekgebied te verdelen in vier gelabelde secties. Het teken gebruikt een statisch referentiepunt voor de X- en Y-as. Gebruik de functie voor meerdere reeksen om gegevens te scheiden op basis van de naam van de bank.

Hiervoor geeft u de volgende eigenschappen op:

  • Naam: specificeer de naam voor de grafiek.

  • Type van Grafiek: Uitgezochte Kwadrant van de drop-down lijst.

  • Selecteer Veelvoudige Reeks checkbox.

  • ModelVoorwerp van Gegevens: Specificeer het bezit van het gegevensmodel voor de reeks. De objecteigenschap van het gegevensmodel voor de naam van de bank is een bovenliggend element van de eigenschappen van het gegevensmodel die zijn getekend in de X-as en Y-as.

  • Modelvoorwerpen van Gegevens: selecteer de eigenschappen van het gegevensmodel om gegevensbanden voor x-as (de Datum van de Transactie) en y-as (het Bedrag van de Transactie) tot stand te brengen.

  • In de sectie van het Punt van de Verwijzing, uitgezochte Statische als Bindend Type.

  • Geef de waarden op voor de referentiepunten op de X-as en de Y-as.

  • Geef de kwadranslabels op voor de kwadranten Linksboven, Rechtsboven, Rechtsonder en Linksonder.

  • Selecteer tonen legenda checkbox om de kleurencodes voor de banknamen te tonen.

Grafieken van het Kwadrant

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