Diagrama de cuadrantes
El gráfico de cuadrantes es un gráfico de visualización que divide los datos en cuatro cuadrantes. Se usa para trazar puntos de datos en una cuadrícula bidimensional, donde una variable se representa en el eje x y otra en el eje y. La división en cuadrantes se determina dividiendo el gráfico en cuatro partes iguales según un conjunto de criterios específicos de los datos analizados. El gráfico de cuadrantes suele usarse para identificar patrones y tendencias en los datos y para priorizar acciones según la posición de los puntos de datos en el gráfico. También se usa habitualmente en ámbitos como los negocios, el marketing y la gestión de riesgos.
Ejemplo
Copiar
Insertar
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]
Sintaxis
Si no hay puntos de datos disponibles en el gráfico, el texto de los ejes y los nombres de los cuadrantes se renderizarán en el centro del cuadrante correspondiente. Si hay puntos de datos, la etiqueta del eje x se renderizará desde el lado izquierdo del cuadrante correspondiente y el texto del cuadrante se mostrará en la parte inferior del gráfico. La etiqueta del eje y se renderizará en la parte inferior del cuadrante correspondiente y el texto del cuadrante se renderizará en la parte superior del cuadrante correspondiente.
En cuanto a los valores de coordenadas de los puntos de datos, el mínimo es 0 y el máximo es 1.
Título
El título es una breve descripción del gráfico y siempre se renderiza en la parte superior del gráfico.
Ejemplo
Copiar
Insertar
quadrantChart
title This is a sample example
x-axis
El eje x determina el texto que se muestra en el eje x. El eje x se divide en dos partes, 'izquierda' y 'derecha'; puedes introducir ambas o solo la 'izquierda'. La sentencia debe empezar por x-axis, luego el left axis text, a continuación el separador --> y por último el right axis text.
Ejemplo
1. x-axis --> se renderizarán tanto el texto del eje izquierdo como el del derecho.
2. x-axis solo renderiza el texto del eje izquierdo.
y-axis
El eje y determina el texto que se muestra en el eje y. El eje y se divide en dos partes, 'superior' e 'inferior'; puedes introducir ambas o solo la 'inferior'. La sentencia debe empezar por y-axis, luego el bottom axis text, a continuación el separador --> y por último el top axis text.
Ejemplo
1. y-axis --> se renderizarán tanto el texto del eje inferior como el del superior.
2. y-axis solo renderiza el texto del eje inferior.
Texto del cuadrante
quadrant-[1,2,3,4] determina el contenido de texto que se muestra en cada cuadrante.
Ejemplo
1. quadrant-1 determina el texto que se mostrará en el cuadrante superior derecho
2. quadrant-2 determina el texto que se mostrará en el cuadrante superior izquierdo.
3. quadrant-3 determina el texto que se mostrará en el cuadrante inferior izquierdo.
4. quadrant-4 determina el texto que se mostrará en el cuadrante inferior derecho.
Punto
Se usa para dibujar un círculo dentro del gráfico de cuadrantes. La sintaxis es : [x, y], donde los valores de x e y van de 0 a 1.
Ejemplo
1. Point 1: [0.75, 0.80] , el punto 1 se dibujará en el cuadrante superior derecho.
2. Point 2: [0.35, 0.24] , el punto 2 se dibujará en el cuadrante inferior izquierdo.
Configuración del gráfico
| Parámetro | Descripción | Valor predeterminado |
|---|---|---|
| chartWidth | El ancho del gráfico | 500 |
| chartHeight | La altura del gráfico | 500 |
| titlePadding | El relleno interior superior e inferior del título | 10 |
| titleFontSize | El tamaño de fuente del título | 20 |
| quadrantPadding | El relleno exterior a todos los cuadrantes | 5 |
| quadrantTextTopPadding | El margen superior del texto del cuadrante cuando el texto se dibuja en la parte superior (no sobre los puntos de datos) | 5 |
| quadrantLabelFontSize | El tamaño de fuente del texto del cuadrante | 16 |
| quadrantInternalBorderStrokeWidth | El ancho del borde interior de los cuadrantes | 1 |
| quadrantExternalBorderStrokeWidth | El ancho del trazo del borde exterior de los cuadrantes | 2 |
| xAxisLabelPadding | El relleno interior superior e inferior del texto del eje x | 5 |
| xAxisLabelFontSize | El tamaño de fuente del texto del eje x | 16 |
| xAxisPosition | La posición del eje x (superior, inferior). Si hay puntos de datos, el eje x siempre se renderizará en la parte inferior | top |
| yAxisLabelPadding | El relleno interior izquierdo y derecho del texto del eje y | 5 |
| yAxisLabelFontSize | El tamaño de fuente del texto del eje y | 16 |
| yAxisPosition | La posición del eje y (izquierda, derecha) | left |
| pointTextPadding | El espacio entre los puntos de datos y el texto situado debajo | 5 |
| pointLabelFontSize | El tamaño de fuente del texto de los puntos de datos | 12 |
| pointRadius | El radio de los puntos de datos | 5 |
Variables de tema del gráfico
| Parámetro | Descripción |
|---|---|
| quadrant1Fill | El color de relleno del cuadrante superior derecho |
| quadrant2Fill | El color de relleno del cuadrante superior izquierdo |
| quadrant3Fill | El color de relleno del cuadrante inferior izquierdo |
| quadrant4Fill | El color de relleno del cuadrante inferior derecho |
| quadrant1TextFill | El color de texto del cuadrante superior derecho |
| quadrant2TextFill | El color de texto del cuadrante superior izquierdo |
| quadrant3TextFill | El color de texto del cuadrante inferior izquierdo |
| quadrant4TextFill | El color de texto del cuadrante inferior derecho |
| quadrantPointFill | El color de relleno de los puntos de datos |
| quadrantPointTextFill | El color de texto de los puntos de datos |
| quadrantXAxisTextFill | El color de texto del eje x |
| quadrantYAxisTextFill | El color de texto del eje y |
| quadrantInternalBorderStrokeFill | El color del borde interior de los cuadrantes |
| quadrantExternalBorderStrokeFill | El color del borde exterior de los cuadrantes |
| quadrantTitleFill | El color del título |
Ejemplo de configuración y tema
Copiar
Insertar
---
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
Estilo del punto de datos
Los puntos de datos pueden estilizarse directamente o usar clases compartidas ya definidas
Estilo directo
Copiar
Insertar
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
Estilo de clase
Copiar
Insertar
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
Estilos disponibles:
| Parámetro | Descripción |
|---|---|
| color | El color de relleno de los puntos de datos |
| radius | El radio de los puntos de datos |
| stroke-width | El ancho del borde de los puntos de datos |
| stroke-color | El color del borde de los puntos de datos (no tiene efecto si no se especifica stroke-width) |
Orden de prioridad: 1. estilo directo 2. estilo de clase 3. estilo de tema
Ejemplo de estilo
Copiar
Insertar
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
