Diagramma a quadranti
Il grafico a quadranti è una visualizzazione che suddivide i dati in quattro quadranti. È usato per tracciare punti dati su una griglia bidimensionale, con una variabile rappresentata sull'asse x e l'altra sull'asse y. La suddivisione in quadranti è determinata dividendo il grafico in quattro parti uguali secondo un insieme di criteri specifici per i dati analizzati. Il grafico a quadranti è comunemente usato per identificare schemi e tendenze nei dati e per stabilire la priorità delle azioni in base alla posizione dei punti dati nel grafico. Di solito è usato in ambiti come il business, il marketing e la gestione del rischio.
Esempio
Copia
Incorpora
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]
Sintassi
Se nel diagramma non sono disponibili punti dati, il testo degli assi e i nomi dei quadranti vengono renderizzati al centro dei rispettivi quadranti. Se ci sono punti dati, l'etichetta dell'asse x viene renderizzata dal lato sinistro del quadrante corrispondente, e il testo del quadrante viene mostrato nella parte inferiore del diagramma. L'etichetta dell'asse y viene renderizzata nella parte inferiore del quadrante corrispondente, e il testo del quadrante viene renderizzato nella parte superiore del quadrante corrispondente.
Per i valori delle coordinate dei punti dati, il valore minimo è 0 e il valore massimo è 1.
Titolo
Il titolo è una breve descrizione del diagramma e viene sempre renderizzato nella parte superiore del diagramma.
Esempio
Copia
Incorpora
quadrantChart
title This is a sample example
x-axis
L'asse x determina il testo mostrato sull'asse x. L'asse x è suddiviso in due parti, 'sinistra' e 'destra'; puoi inserire entrambe oppure solo 'sinistra'. L'istruzione deve iniziare con x-axis, seguita da left axis text, poi dal separatore -->, e infine da right axis text.
Esempio
1. x-axis --> verranno renderizzati sia il testo dell'asse sinistro sia quello dell'asse destro.
2. x-axis renderizza solo il testo dell'asse sinistro.
y-axis
L'asse y determina il testo mostrato sull'asse y. L'asse y è suddiviso in due parti, 'superiore' e 'inferiore'; puoi inserire entrambe oppure solo 'inferiore'. L'istruzione deve iniziare con y-axis, seguita da bottom axis text, poi dal separatore -->, e infine da top axis text.
Esempio
1. y-axis --> verranno renderizzati sia il testo dell'asse inferiore sia quello dell'asse superiore.
2. y-axis renderizza solo il testo dell'asse inferiore.
Testo del quadrante
quadrant-[1,2,3,4] determina il contenuto testuale mostrato in ciascun quadrante.
Esempio
1. quadrant-1 determina il testo che verrà mostrato nel quadrante in alto a destra
2. quadrant-2 determina il testo che verrà mostrato nel quadrante in alto a sinistra.
3. quadrant-3 determina il testo che verrà mostrato nel quadrante in basso a sinistra.
4. quadrant-4 determina il testo che verrà mostrato nel quadrante in basso a destra.
Punto
Serve a disegnare un cerchio all'interno del grafico a quadranti. La sintassi è : [x, y], dove x e y hanno valori compresi tra 0 e 1.
Esempio
1. Point 1: [0.75, 0.80] , il punto 1 verrà disegnato nel quadrante in alto a destra.
2. Point 2: [0.35, 0.24] , il punto 2 verrà disegnato nel quadrante in basso a sinistra.
Configurazione del diagramma
| Parametro | Descrizione | Valore predefinito |
|---|---|---|
| chartWidth | Larghezza del diagramma | 500 |
| chartHeight | Altezza del diagramma | 500 |
| titlePadding | Spaziatura interna superiore e inferiore del titolo | 10 |
| titleFontSize | Dimensione del carattere del titolo | 20 |
| quadrantPadding | Spaziatura esterna a tutti i quadranti | 5 |
| quadrantTextTopPadding | Margine superiore del testo del quadrante quando il testo è disegnato in alto (non su un punto dati) | 5 |
| quadrantLabelFontSize | Dimensione del carattere del testo del quadrante | 16 |
| quadrantInternalBorderStrokeWidth | Spessore del bordo interno dei quadranti | 1 |
| quadrantExternalBorderStrokeWidth | Spessore del tratto del bordo esterno dei quadranti | 2 |
| xAxisLabelPadding | Spaziatura interna superiore e inferiore del testo dell'asse x | 5 |
| xAxisLabelFontSize | Dimensione del carattere del testo dell'asse x | 16 |
| xAxisPosition | La posizione dell'asse x (in alto, in basso). Se ci sono punti dati, l'asse x verrà sempre renderizzato in basso | top |
| yAxisLabelPadding | Spaziatura interna sinistra e destra del testo dell'asse y | 5 |
| yAxisLabelFontSize | Dimensione del carattere del testo dell'asse y | 16 |
| yAxisPosition | Posizione dell'asse y (sinistra, destra) | left |
| pointTextPadding | Distanza tra il punto dati e il testo sottostante | 5 |
| pointLabelFontSize | Dimensione del carattere del testo del punto dati | 12 |
| pointRadius | Raggio del punto dati | 5 |
Variabili del tema del diagramma
| Parametro | Descrizione |
|---|---|
| quadrant1Fill | Colore di riempimento del quadrante in alto a destra |
| quadrant2Fill | Colore di riempimento del quadrante in alto a sinistra |
| quadrant3Fill | Colore di riempimento del quadrante in basso a sinistra |
| quadrant4Fill | Colore di riempimento del quadrante in basso a destra |
| quadrant1TextFill | Colore del testo del quadrante in alto a destra |
| quadrant2TextFill | Colore del testo del quadrante in alto a sinistra |
| quadrant3TextFill | Colore del testo del quadrante in basso a sinistra |
| quadrant4TextFill | Colore del testo del quadrante in basso a destra |
| quadrantPointFill | Colore di riempimento del punto dati |
| quadrantPointTextFill | Colore del testo del punto dati |
| quadrantXAxisTextFill | Colore del testo dell'asse x |
| quadrantYAxisTextFill | Colore del testo dell'asse y |
| quadrantInternalBorderStrokeFill | Colore del bordo interno dei quadranti |
| quadrantExternalBorderStrokeFill | Colore del bordo esterno dei quadranti |
| quadrantTitleFill | Colore del titolo |
Esempio di configurazione e tema
Copia
Incorpora
---
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
Stile dei punti dati
I punti dati possono essere stilizzati direttamente oppure usando classi condivise già definite
Stile diretto
Copia
Incorpora
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
Stile della classe
Copia
Incorpora
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
Stili disponibili:
| Parametro | Descrizione |
|---|---|
| color | Colore di riempimento del punto dati |
| radius | Raggio del punto dati |
| stroke-width | Spessore del bordo del punto dati |
| stroke-color | Colore del bordo del punto dati (non ha effetto quando stroke-width non è specificato) |
Ordine di priorità: 1. Stile diretto 2. Stile della classe 3. Stile del tema
Esempio di stile
Copia
Incorpora
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
