Introdução

Highcharts é uma biblioteca de gráficos JavaScript de nível empresarial baseada em SVG. Ele vem com excelente documentação e inúmeros exemplos. A única desvantagem é que a licença é proprietária. É gratuito para uso pessoal/não comercial, mas você deve pagar por aplicativos comerciais.

Em um artigo anterior , apresentamos o Highcharts e o ambiente de trabalho para explorar o Highcharts usando o Create React App . Continuamos a usar este ambiente para experimentar o gráfico de coordenadas paralelas.

Conforme explicamos no artigo anterior, é recomendável incluir as seguintes importações para cada gráfico:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

• highcharts-react-official: é o wrapper oficial suportado pelo Highcharts para React.
• highcharts/modules/exporting: É o módulo de exportação Highcharts que fornece um menu com itens de menu relacionados à exportação para View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF documente Download SVG vector image.
• highcharts/modules/accessibility: É o módulo de acessibilidade Highcharts que fornece acessibilidade para o HTML do gráfico gerado.

Um gráfico de coordenadas paralelas é uma maneira comum de visualizar e analisar conjuntos de dados de alta dimensão. A natureza das coordenadas paralelas requer pelo menos dois eixos, que podem ser do mesmo tipo ou de tipos diferentes.

Os tipos de eixo compatíveis com Highcharts são linear, logarithmic, e . Além disso, é usado para gráficos de Gantt, todos os outros tipos de eixo estão disponíveis para um gráfico de coordenadas paralelas. O tipo de eixo padrão é , que usa a escala linear.datetimecategorytreegridtreegridlinear

O seguinte src/App.jsé um exemplo que mostra um gráfico de coordenadas paralelas com dois lineareixos:

• Nas linhas 5 e 8, highcharts/modules/parallel-coordinatesé carregado, o que é necessário para o gráfico de coordenadas paralelas.
• Nas linhas 10–18, dataé criado com 7 linhas, onde cada linha é composta por duas coordenadas.
• Nas linhas 21–29, a configuração do gráfico é definida.
  – Na linha 22, typeé definido como 'linear'.
  – Nas linhas 23–24, widthe heightsão definidos.
  – Na linha 25, parallelCoordinatesé definido como verdadeiro.
  – Nas linhas 26–28, todos os eixos paralelos são configurados com lineWidth2 (o padrão é 1).
• Nas linhas 30–32, o título do gráfico é definido como 'Parallel Coordinates Chart'.
• Nas linhas 33–36, dois xAxissão definidos, offsetsendo 10.
• Nas linhas 37–52, dois yAxissão definidos.
  – Nas linhas 38–44, o primeiro yAxisé linear. miné 0 e maxé 10. Visto que startOnTické definido como falso mine maxos valores são estritamente aplicados. reversedé definido como verdadeiro, de modo que a origem esteja no topo.
  – Nas linhas 45–51, o segundo yAxistambém é linear, com configuração semelhante.
• Nas linhas 53–56, seriessão calculados a partir da data(linha 10).
• Nas linhas 57–59, os créditos padrão foram desativados.
• Na linha 62, um gráfico de coordenadas paralelas é criado.

Passe o mouse no lado esquerdo da linha, mostra a coordenada do primeiro eixo.

Passe o mouse no lado direito da linha, mostra a coordenada do segundo eixo.

Para cada linha, existem marcadores em duas extremidades e podemos desligá-los.

plotOptions: {
  series: {
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false,
        },
      },
    },
  },
}

Gráfico de coordenadas paralelas com um eixo linear e um eixo logarítmico

Mudamos o segundo yAxispara logarithmic, que exibe dados numéricos em uma ampla gama de valores de forma compacta. startOnTické removido, pois os valores mine maxnão são aplicados de qualquer maneira.

{
  type: 'logarithmic',
  min: 10,
  max: 100,
  s̶t̶a̶r̶t̶O̶n̶T̶i̶c̶k̶:̶ ̶f̶a̶l̶s̶e̶,̶
  startOnTick: false,
  reversed: true,
}

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values'],
  offset: 10,
}

Também podemos definir todas as linhas para pink, e passar o mouse para purplein src/App.css:

.highcharts-series path {
  stroke: pink;
  stroke-width: 2px;
}
.highcharts-series-hover path {
  stroke: purple;
}

Execute yarn start, e veremos um gráfico de coordenadas paralelas com pinklinhas.

E a linha suspensa é purple.

Quando uma linha é focalizada, as linhas não suspensas tornam-se esmaecidas ( inactive). O efeito é obtido pela configuração de Highchats opacitypara 0,2. Ele pode ser desligado definindo opacitycomo 1 em src/App.css:

.highcharts-series-inactive {
  opacity: 1;
}

A opacityregra é apenas para ilustração, não a usamos para o restante dos exemplos.

Gráfico de coordenadas paralelas com três eixos

Criamos o terceiro yAxispara ser datetime, que usa escala de data e hora e exibe os valores de data e hora como rótulos de eixo no formato especificado. Date.UTC(year, month, day, hours, minutes, seconds, milliseconds)pode obter o tempo em milissegundos para UTC (Universal Time Coordinated), o horário padrão global definido pelo World Time Standard - historicamente conhecido como Greenwich Mean Time.

Aqui está o tipo/intervalo de Date.UTCparâmetros:

• year: inteiro
• month: 0–11
• day: 1–31
• hours: 0–23
• minutes: 0–59
• seconds: 0–59
• milliseconds: 0–999

const data = [
  [0, 30, Date.UTC(2023)], 
  [2, 45, Date.UTC(2022)], 
  [4, 20, Date.UTC(2022)], 
  [5, 33, Date.UTC(2020)], 
  [6, 60, Date.UTC(2019)],
  [8, 73, Date.UTC(2018)], 
  [9, 80, Date.UTC(2016)],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years'],
  offset: 10,
}

{
  type: 'datetime',
}

O gráfico parece bom até passarmos o mouse sobre uma linha próxima ao terceiro eixo. Ele mostra o valor da data e hora em milissegundos, em vez do ano.

Podemos configurar tooltippara usar formattedValue, em vez do valor bruto:

tooltip: {
  pointFormat: '{series.name}: <b>{point.formattedValue}</b><br/>',
}

Um gráfico de coordenadas paralelas pode suportar tipos de lineou spline. Aqui está o modificado src/App.js, que define o tipo de gráfico para spline(linha 23):

Execute yarn start, e veremos um gráfico de coordenadas paralelas com linhas curvas ( spline).

Gráfico de Coordenadas Paralelas com Quatro Eixos

Criamos o quarto yAxispara ser datetimetambém, mas o fazemos para mostrar meses. Para mostrar os rótulos dos meses de maneira significativa, a distância entre os valores deve ser de meses.

Expandimos datacom as quartas coordenadas de datetime:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0)], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2)], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3)], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4)], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4)],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6)], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8)],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months'],
  offset: 10,
}

{
  type: 'datetime',
  min: Date.UTC(2023, 0), // January
  max: Date.UTC(2023, 11), // December
  tickInterval: 24 * 3600 * 1000 * 30, // A month
  reversed: true,
  labels: {
    format: '{value:%B}', // long month format, like January
  },
}

• %a: Dia da semana curto, comoMon
• %A: Dia da semana longo, comoMonday
• %d: Dia do mês com dois dígitos, 01 a 31
• %e: Dia do mês, 1 a 31
• %w: Dia da semana, 0 a 6
• %b: Mês curto, comoJan
• %B: Mês longo, comoJanuary
• %m: Número do mês de dois dígitos, 01 a 12
• %y: Ano de dois dígitos, como 09 para 2009
• %Y: Ano de quatro dígitos, como 2009
• %H: Horas com dois dígitos no formato 24h, 00 a 23
• %k: Horas no formato 24h, 0 a 23
• %I: Horas com dois dígitos no formato 12h, 00 a 11
• %l: Horas no formato de 12h, 1 a 12
• %M: Minutos com dois dígitos, 00 a 59
• %p: Maiúsculas AM ou PM
• %P: Minúsculas AM ou PM
• %S: Segundos de dois dígitos, 00 a 59
• %L: Milissegundos

Execute yarn start, e veremos um gráfico de coordenadas paralelas com um lineareixo, um logarithmiceixo, um datetimeeixo para Yearse um datetimeeixo para Months.

Gráfico de coordenadas paralelas com cinco eixos

A gente cria a quinta yAxispra ser datetimetambém, mas faz pra hora do show. Para mostrar os rótulos de tempo de maneira significativa, a distância entre os valores deve ser de horas.

Expandimos datacom as quintas coordenadas de datetime:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30)], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0)], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0)], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0)], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10)],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30)], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15)],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months', 'Time'],
  offset: 10,
}

{
  type: 'datetime',
  reversed: true,
  labels: {
    format: '{value:%l:%M:%S %p}', // time format, like 8:30:00 AM
  },
}

Execute yarn start, e veremos um gráfico de coordenadas paralelas com um lineareixo, um logarithmiceixo, um datetimeeixo para Years, um datetimeeixo para Monthse um datetimeeixo para Time.

Gráfico de coordenadas paralelas com seis eixos

Criamos o sexto yAxispara ser category, com 4 grupos (0–3).

Expanda datacom as sextas coordenadas de category:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0), 2], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10), 2],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), 2], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months', 'Time', 'Categories'],
  offset: 10,
}

{
  type: 'category',
  reversed: true,
  categories: ['A', 'B', 'C', 'D'],
}

Execute yarn start, e veremos um gráfico de coordenadas paralelas com um lineareixo, um logarithmiceixo, um datetimeeixo para Years, um datetimeeixo para Months, um datetimeeixo para Timee um category eixo para 4 grupos.

Gráfico de Coordenadas Paralelas com Sétimos Eixos

Criamos o sétimo yAxispara ser categorytambém, com 2 grupos (0–1).

Expanda datacom as sétimas coordenadas de category:

const data = [
  [0, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0, 1], 
  [2, 45, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0, 0], 
  [4, 20, Date.UTC(2022), Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1, 0], 
  [5, 33, Date.UTC(2020), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 12, 30, 0), 2, 1], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), Date.UTC(2023, 0, 1, 14, 40, 10), 2, 1],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), 2, 1], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3, 1],
];

xAxis: {
  categories: ['Linear Values', 'Logarithmic Values', 'Years', 'Months', 'Time', 'Categories', 'State'],
  offset: 10,
}

{
  type: 'category',
  categories: ['False', 'True'],
}

Execute yarn start, e veremos um gráfico de coordenadas paralelas com um lineareixo, um logarithmiceixo, um datetimeeixo para Years, um datetimeeixo para Months, um datetimeeixo para Time, um categoryeixo para 4 grupos e um categoryeixo para 2 grupos.

Gráfico de coordenadas paralelas com mais ou menos dados

Mostramos um gráfico de coordenadas paralelas com vários dados. E se os dados estiverem incompletos, ou seja, alguns valores forem nulos?

const data = [
  [null, 30, Date.UTC(2023), Date.UTC(2023, 0), Date.UTC(2023, 0, 1, 8, 20, 30), 0, 1], 
  [2, null, Date.UTC(2022), Date.UTC(2023, 2), Date.UTC(2023, 0, 1, 9, 0, 0), 0, 0], 
  [4, 20, null, Date.UTC(2023, 3), Date.UTC(2023, 0, 1, 7, 0, 0), 1, 0], 
  [5, 33, Date.UTC(2020), null, Date.UTC(2023, 0, 1, 12, 30, 0), 2, 1], 
  [6, 60, Date.UTC(2019), Date.UTC(2023, 4), null, 2, 1],
  [8, 73, Date.UTC(2018), Date.UTC(2023, 6), Date.UTC(2023, 0, 1, 17, 0, 30), null, 1], 
  [9, 80, Date.UTC(2016), Date.UTC(2023, 8), Date.UTC(2023, 0, 1, 19, 45, 15), 3, null],
];

Passar o mouse sobre uma linha quebrada ainda destaca todas as peças:

Um gráfico de coordenadas paralelas ajuda a analisar grandes conjuntos de dados para encontrar padrões e correlações. Em vez de 7 linhas codificadas nos exemplos anteriores, a seguinte modificação src/App.jsgera 100 linhas aleatórias:

• Na linha 11, TOTAL_LINE_COUNTestá configurado com 100 linhas.
• Nas linhas 13–24, dataé gerado dinamicamente com base em algum cálculo aleatório.

Aqui está o gráfico com uma linha suspensa.

Gráfico de coordenadas paralelas que é sobrevoado de forma programável

Exploramos o gráfico de coordenadas paralelas em detalhes. Vamos ter um efeito divertido para passar o mouse programadamente em uma linha a cada segundo.

Instalamos um gancho que fornece um declarativo setIntervalchamado useInterval.

% yarn add @use-it/interval

"dependencies": {
  "@use-it/interval": "^1.0.0",
  "highcharts": "^10.3.2",
  "highcharts-react-official": "^3.1.0"
}

• Na linha 51, enableMouseTrackingestá desabilitado enquanto realizamos o hovering programável.
• Na linha 124, chartComponentRefé gerado a partir de useRef, onde chartComponentRef.currentaponta para o objeto gráfico configurando-o na linha 135.
• Nas linhas 126–133, useIntervalé invocado a cada segundo (1000 ms). Ele seleciona uma linha aleatória (linha 128). Na linha 130, a linha selecionada é definida como hover, e as outras linhas são definidas como inactive.

Aqui está o modificado src/App.css:

.highcharts-series path {
  stroke: rgb(0, 0, 255, 0.2);
  stroke-width: 2px;
}
.highcharts-series-hover path {
  stroke: purple;
  stroke-width: 5px;
}
.highcharts-series-inactive path {
  stroke: blue;
}

O vídeo a seguir captura a dinâmica.

O repositório de código completo está localizado aqui .

Conclusão

Highcharts é uma biblioteca de gráficos JavaScript de nível empresarial baseada em SVG. Ele vem com excelente documentação e inúmeros exemplos.

Neste artigo, fornecemos um guia passo a passo sobre o gráfico de coordenadas paralelas.

Também escrevemos artigos sobre outros tipos de Highcharts:

• Neste artigo : line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemape gauge.
• Neste artigo : bubble, packedbubble, streamgraphe cylinder.
• Neste artigo : sankeydiagram, arcdiagram, dependencywheele networkgraph.

Obrigado por ler.

Want to Connect? 

If you are interested, check out my directory of web development articles.