Nelikenttäkaavio
Kvadranttikaavio on visualisointikaavio, joka jakaa tiedot neljään kvadranttiin. Sitä käytetään datapisteiden piirtämiseen kaksiulotteiselle ruudukolle, jossa yksi muuttuja esitetään x-akselilla ja toinen y-akselilla. Kvadranttien jako määritetään jakamalla kaavio neljään yhtä suureen osaan analysoitavan datan mukaisten kriteerien perusteella. Kvadranttikaaviota käytetään yleisesti datan kuvioiden ja trendien tunnistamiseen sekä toimien priorisointiin datapisteiden sijainnin perusteella kaaviossa. Niitä käytetään yleisesti liiketoiminnassa, markkinoinnissa ja riskienhallinnassa.
Esimerkki
Kopioi
Upotus
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Syntaksi
Jos kaaviossa ei ole käytettävissä datapisteitä, akselin teksti ja kvadranttien nimet renderöidään vastaavan kvadrantin keskelle. Jos datapisteitä on, x-akselin merkintä renderöidään vastaavan kvadrantin vasemmalta puolelta ja kvadrantin teksti näytetään kaavion alaosassa. y-akselin merkintä renderöidään vastaavan kvadrantin alaosaan ja kvadrantin teksti renderöidään vastaavan kvadrantin yläosaan.
Datapisteiden koordinaateissa minimiarvo on 0 ja maksimiarvo 1.
Otsikko
Otsikko on kaavion lyhyt kuvaus, ja se renderöidään aina kaavion yläosaan.
Esimerkki
Kopioi
Upotus
quadrantChart
title This is a sample example
x-axis
x-akseli määrittää x-akselilla näytettävän tekstin. x-akseli jakautuu 'vasempaan' ja 'oikeaan' osaan, ja voit syöttää molemmat tai vain 'vasemman'. Lauseen on alettava x-axis-komennolla, jota seuraa left axis text, sitten erotin --> ja lopuksi right axis text.
Esimerkki
1. x-axis --> sekä vasemman että oikean akselin teksti renderöidään.
2. x-axis renderöi vain vasemman akselin tekstin.
y-axis
y-akseli määrittää y-akselilla näytettävän tekstin. y-akseli jakautuu 'ylä-' ja 'alaosaan', ja voit syöttää molemmat tai vain 'alaosan'. Lauseen on alettava y-axis-komennolla, jota seuraa bottom axis text, sitten erotin --> ja lopuksi top axis text.
Esimerkki
1. y-axis --> sekä ala- että yläakselin teksti renderöidään.
2. y-axis renderöi vain ala-akselin tekstin.
Kvadranttiteksti
quadrant-[1,2,3,4] määrittää kussakin kvadrantissa näytettävän tekstisisällön.
Esimerkki
1. quadrant-1 määrittää oikeassa yläkvadrantissa näytettävän tekstin
2. quadrant-2 määrittää vasemmassa yläkvadrantissa näytettävän tekstin.
3. quadrant-3 määrittää vasemmassa alakvadrantissa näytettävän tekstin.
4. quadrant-4 määrittää oikeassa alakvadrantissa näytettävän tekstin.
Piste
Käytetään ympyrän piirtämiseen kvadranttikaavioon. Syntaksi on : [x, y], jossa x:n ja y:n arvoalue on 0 - 1.
Esimerkki
1. Point 1: [0.75, 0.80] , piste 1 piirretään oikeaan yläkvadranttiin.
2. Point 2: [0.35, 0.24] , piste 2 piirretään vasempaan alakvadranttiin.
Kaavion kokoonpano
| Parametri | Kuvaus | Oletusarvo |
|---|---|---|
| chartWidth | Kaavion leveys | 500 |
| chartHeight | Kaavion korkeus | 500 |
| titlePadding | Otsikon ylä- ja alasisennus | 10 |
| titleFontSize | Otsikon fonttikoko | 20 |
| quadrantPadding | Kaikkien kvadranttien ulkopuolinen täyte | 5 |
| quadrantTextTopPadding | Kvadranttitekstin ylämarginaali, kun teksti piirretään yläosaan (ei datapisteeseen) | 5 |
| quadrantLabelFontSize | Kvadranttitekstin fonttikoko | 16 |
| quadrantInternalBorderStrokeWidth | Kvadrantin sisäreunuksen leveys | 1 |
| quadrantExternalBorderStrokeWidth | Kvadrantin ulkoreunuksen ääriviivan leveys | 2 |
| xAxisLabelPadding | x-akselin tekstin ylä- ja alasisennus | 5 |
| xAxisLabelFontSize | x-akselin tekstin fonttikoko | 16 |
| xAxisPosition | x-akselin sijainti (ylä, ala). Jos datapisteitä on, x-akseli renderöidään aina alaosaan | top |
| yAxisLabelPadding | y-akselin tekstin vasen ja oikea sisennys | 5 |
| yAxisLabelFontSize | y-akselin tekstin fonttikoko | 16 |
| yAxisPosition | y-akselin sijainti (vasen, oikea) | left |
| pointTextPadding | Datapisteen ja sen alla olevan tekstin välinen väli | 5 |
| pointLabelFontSize | Datapistetekstin fonttikoko | 12 |
| pointRadius | Datapisteen säde | 5 |
Kaavion teemamuuttuja
| Parametri | Kuvaus |
|---|---|
| quadrant1Fill | Oikean yläkvadrantin täyttöväri |
| quadrant2Fill | Vasemman yläkvadrantin täyttöväri |
| quadrant3Fill | Vasemman alakvadrantin täyttöväri |
| quadrant4Fill | Oikean alakvadrantin täyttöväri |
| quadrant1TextFill | Oikean yläkvadrantin tekstin väri |
| quadrant2TextFill | Vasemman yläkvadrantin tekstin väri |
| quadrant3TextFill | Vasemman alakvadrantin tekstin väri |
| quadrant4TextFill | Oikean alakvadrantin tekstin väri |
| quadrantPointFill | Datapisteen täyttöväri |
| quadrantPointTextFill | Datapistetekstin väri |
| quadrantXAxisTextFill | x-akselin tekstin väri |
| quadrantYAxisTextFill | y-akselin tekstin väri |
| quadrantInternalBorderStrokeFill | Kvadrantin sisäreunuksen väri |
| quadrantExternalBorderStrokeFill | Kvadrantin ulkoreunuksen väri |
| quadrantTitleFill | Otsikon väri |
Kokoonpano- ja teemaesimerkki
Kopioi
Upotus
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
Datapisteen tyyli
Datapiste voidaan tyylitellä suoraan tai käyttää määritettyä jaettua luokkaa
Suora tyyli
Kopioi
Upotus
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Luokkatyyli
Kopioi
Upotus
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
Käytettävissä olevat tyylit:
| Parametri | Kuvaus |
|---|---|
| color | Datapisteen täyttöväri |
| radius | Datapisteen säde |
| stroke-width | Datapisteen reunuksen leveys |
| stroke-color | Datapisteen reunuksen väri (ei voimassa, kun stroke-width:iä ei ole määritetty) |
Prioriteettijärjestys: 1. Suora tyyli 2. Luokkatyyli 3. Teematyyli
Tyliesimerkki
Kopioi
Upotus
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
