Diagrama de quadrantes
O gráfico de quadrantes é uma visualização que divide os dados em quatro quadrantes. Ele é usado para plotar pontos de dados em uma grade bidimensional, em que uma variável é representada no eixo x e outra no eixo y. A divisão dos quadrantes é determinada com base em um conjunto de critérios específicos dos dados analisados, dividindo o gráfico em quatro partes iguais. O gráfico de quadrantes é geralmente usado para identificar padrões e tendências nos dados e para priorizar ações com base na posição dos pontos de dados no gráfico. Geralmente é usado em cenários como negócios, marketing e gestão de riscos.
Exemplo
Copiar
Incorporar
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]
Sintaxe
Se não houver pontos de dados disponíveis no gráfico, o texto dos eixos e os nomes dos quadrantes serão renderizados no centro do quadrante correspondente. Se houver pontos de dados, os rótulos do eixo x serão renderizados a partir do lado esquerdo do quadrante correspondente, e o texto do quadrante será exibido na parte inferior do gráfico. Os rótulos do eixo y serão renderizados na parte inferior do quadrante correspondente, e o texto do quadrante será renderizado na parte superior do quadrante correspondente.
Para os valores de coordenadas dos pontos de dados, o valor mínimo é 0 e o máximo é 1.
Título
O título é uma breve descrição do gráfico; ele será sempre renderizado no topo do gráfico.
Exemplo
Copiar
Incorporar
quadrantChart
title This is a sample example
x-axis
O eixo x determina o texto exibido no eixo x. O eixo x é dividido em duas partes, 'esquerda' e 'direita'; você pode inserir ambas ou apenas a 'esquerda'. A instrução deve começar com x-axis, seguida de left axis text, depois do separador --> e, por fim, de right axis text.
Exemplo
1. x-axis --> tanto o texto do eixo esquerdo quanto o do eixo direito serão renderizados.
2. x-axis renderiza apenas o texto do eixo esquerdo.
y-axis
O eixo y determina o texto exibido no eixo y. O eixo y é dividido em duas partes, 'superior' e 'inferior'; você pode inserir ambas ou apenas a 'inferior'. A instrução deve começar com y-axis, seguida de bottom axis text, depois do separador --> e, por fim, de top axis text.
Exemplo
1. y-axis --> tanto o texto do eixo inferior quanto o do eixo superior serão renderizados.
2. y-axis renderiza apenas o texto do eixo inferior.
Texto do quadrante
quadrant-[1,2,3,4] determina o conteúdo exibido em cada quadrante.
Exemplo
1. quadrant-1 determina o texto a ser exibido no quadrante superior direito
2. quadrant-2 determina o texto a ser exibido no quadrante superior esquerdo.
3. quadrant-3 determina o texto a ser exibido no quadrante inferior esquerdo.
4. quadrant-4 determina o texto a ser exibido no quadrante inferior direito.
Ponto
Usado para desenhar um círculo dentro do gráfico de quadrantes. A sintaxe é : [x, y], em que os valores de x e y variam de 0 a 1.
Exemplo
1. Point 1: [0.75, 0.80], o ponto 1 será desenhado no quadrante superior direito.
2. Point 2: [0.35, 0.24], o ponto 2 será desenhado no quadrante inferior esquerdo.
Configuração do gráfico
| Parâmetro | Descrição | Valor padrão |
|---|---|---|
| chartWidth | Largura do gráfico | 500 |
| chartHeight | Altura do gráfico | 500 |
| titlePadding | Preenchimento superior e inferior do título | 10 |
| titleFontSize | Tamanho da fonte do título | 20 |
| quadrantPadding | Preenchimento fora de todos os quadrantes | 5 |
| quadrantTextTopPadding | Margem superior do texto do quadrante quando o texto é desenhado no topo (não sobre o ponto de dados) | 5 |
| quadrantLabelFontSize | Tamanho da fonte do texto do quadrante | 16 |
| quadrantInternalBorderStrokeWidth | Largura da borda interna do quadrante | 1 |
| quadrantExternalBorderStrokeWidth | Largura do traço da borda externa do quadrante | 2 |
| xAxisLabelPadding | Preenchimento superior e inferior do texto do eixo x | 5 |
| xAxisLabelFontSize | Tamanho da fonte do texto do eixo x | 16 |
| xAxisPosition | Posição do eixo x (topo, inferior). Se houver pontos de dados, o eixo x será sempre renderizado na parte inferior | top |
| yAxisLabelPadding | Preenchimento esquerdo e direito do texto do eixo y | 5 |
| yAxisLabelFontSize | Tamanho da fonte do texto do eixo y | 16 |
| yAxisPosition | Posição do eixo y (esquerda, direita) | left |
| pointTextPadding | Espaçamento entre o ponto de dados e o texto abaixo | 5 |
| pointLabelFontSize | Tamanho da fonte do texto do ponto de dados | 12 |
| pointRadius | Raio do ponto de dados | 5 |
Variáveis de tema do gráfico
| Parâmetro | Descrição |
|---|---|
| quadrant1Fill | Cor de preenchimento do quadrante superior direito |
| quadrant2Fill | Cor de preenchimento do quadrante superior esquerdo |
| quadrant3Fill | Cor de preenchimento do quadrante inferior esquerdo |
| quadrant4Fill | Cor de preenchimento do quadrante inferior direito |
| quadrant1TextFill | Cor do texto do quadrante superior direito |
| quadrant2TextFill | Cor do texto do quadrante superior esquerdo |
| quadrant3TextFill | Cor do texto do quadrante inferior esquerdo |
| quadrant4TextFill | Cor do texto do quadrante inferior direito |
| quadrantPointFill | Cor de preenchimento do ponto de dados |
| quadrantPointTextFill | Cor do texto do ponto de dados |
| quadrantXAxisTextFill | Cor do texto do eixo x |
| quadrantYAxisTextFill | Cor do texto do eixo y |
| quadrantInternalBorderStrokeFill | Cor da borda interna do quadrante |
| quadrantExternalBorderStrokeFill | Cor da borda externa do quadrante |
| quadrantTitleFill | Cor do título |
Exemplo de configuração e tema
Copiar
Incorporar
---
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 do ponto de dados
Os pontos de dados podem ser estilizados diretamente ou usar classes compartilhadas já definidas
Estilo direto
Copiar
Incorporar
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 classe
Copiar
Incorporar
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 disponíveis:
| Parâmetro | Descrição |
|---|---|
| color | Cor de preenchimento do ponto de dados |
| radius | Raio do ponto de dados |
| stroke-width | Largura da borda do ponto de dados |
| stroke-color | Cor da borda do ponto de dados (sem efeito quando stroke-width não é especificado) |
Ordem de prioridade: 1. Estilo direto 2. Estilo de classe 3. Estilo de tema
Exemplo de estilo
Copiar
Incorporar
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
