Na série intitulada Introdução ao Chart.js, você aprendeu a usar o Chart.js para criar facilmente gráficos responsivos baseados em tela. A série cobriu sete tipos básicos de gráficos oferecidos pela biblioteca. No entanto, pode ser necessário criar gráficos mais complexos com funcionalidades adicionais para torná-los interativos.
Uma das melhores bibliotecas gratuitas para criar uma variedade de gráficos responsivos, interativos e ricos em funcionalidades é o Plotly.js. Nesta série, você aprenderá a criar diferentes tipos de gráficos usando Plotly.js, incluindo gráficos de linhas, gráficos de barras, gráficos de bolhas e gráficos de pontos.
Por que usar Plotly.js?
Plotly.js oferece muitos recursos que fazem o aprendizado sobre a biblioteca valer a pena. É uma biblioteca declarativa de alto nível construída sobre d3.js e stack.gl. Aqui está uma lista de recursos que fazem do Plotly uma das melhores bibliotecas de gráficos JavaScript:
- Você pode criar gráficos interativos com facilidade usando Plotly.js. Qualquer gráfico que você criar com a biblioteca está equipado com recursos como zoom in, zoom out, pan, auto-scaling, etc. Esses recursos são muito úteis quando você deseja estudar gráficos com um grande número de pontos plotados. Todos esses eventos são expostos na API, para que você possa escrever código personalizado para realizar suas próprias ações quando qualquer um desses eventos for acionado.
- O alto desempenho ao plotar muitos pontos torna o Plotly.js uma ótima opção sempre que você precisa traçar uma grande quantidade de dados. Como a maioria dos gráficos é criada usando SVG, você obtém uma quantidade razoável de compatibilidade entre navegadores e a capacidade de exportar imagens de alta qualidade de qualquer gráfico. No entanto, desenhar um grande número de elementos SVG no DOM pode afetar negativamente o desempenho. A biblioteca usa stack.gl para criar gráficos 2D e 3D de alto desempenho.
- Quaisquer gráficos 3D que você cria são renderizados com a ajuda do WebGL para aproveitar ao máximo todo o poder que a GPU tem a oferecer.
- Todos os gráficos Plotly.js são totalmente personalizáveis. Tudo, desde cores e rótulos até linhas de grade e legendas, pode ser personalizado usando um conjunto de atributos JSON. Você aprenderá a personalizar diferentes tipos de gráficos nas próximas três partes da série.
Instalando o Plotly
Antes de começarmos a usar o Plotly.js, precisamos instalá-lo primeiro. Há muitas maneiras diferentes de instalar a biblioteca.
A primeira opção é realizar a instalação usando npm executando o seguinte comando:
npm install plotly.js
Esta opção é provavelmente a mais elegante e flexível. No entanto, você precisará configurar um empacotador, que transforma automaticamente os pacotes npm que você usa em algo que o navegador possa processar. Além disso, para realmente usar o pacote, você provavelmente deseja usar o ESM. Você pode ler mais sobre o ESM aqui.
Se você deseja uma solução rápida para prototipagem, também pode usar a CDN Plotly.js e vincular diretamente à biblioteca:
No momento da redação deste tutorial, a versão mais recente da biblioteca é 2.14.0. O tamanho do arquivo após a redução e compactação da biblioteca é de 1,1 MB. A versão não minificada e não compactada tem um tamanho de 3,5 MB. Como você pode ver, a longa lista de recursos que esta biblioteca oferece tem um preço.
A partir da versão 1.15, você pode escolher entre diferentes pacotes parciais, cada um dos quais permite criar tipos de gráficos específicos. Existem sete pacotes diferentes: basic, cartesian, geo, gl3d, gl2d, mapbox, finance e strict. Você pode obter o link CDN para esses pacotes usando a seguinte linha:
https://cdn.plot.ly/plotly-bundleName-2.14.0.min.js // Therefore the basic bundle becomes: https://cdn.plot.ly/plotly-basic-2.14.0.min.js // and the cartesian bundle becomes: https://cdn.plot.ly/plotly-cartesian-2.14.0.min.js
Como alternativa, se você estiver usando o NPM, poderá instalar um pacote para esse pacote
npm install plotly.js-bundleName-dist
Se você só precisar desenhar gráficos de um único pacote, poderá usar esse método para reduzir significativamente o tamanho do arquivo. Aqui estão algumas informações adicionais sobre cada um deles.
-
básico: Este pacote contém o
scatter,barepiemódulos de rastreamento. A versão compactada e minificada deste pacote tem um tamanho de 215,7 kB. -
cartesiano: Este pacote contém o
scatter,bar,box,heatmap,histogram,histogram2d,histogram2dcontour,pie,contourescatterternarymódulos de rastreamento. A versão compactada e minificada deste pacote tem um tamanho de 238,2 kB. - geo: este pacote permite que você crie diferentes tipos de gráficos relacionados a mapas em JavaScript. A versão compactada e minificada deste pacote tem um tamanho de 224,1 kB.
-
gl3d: Este pacote permite que você crie diferentes tipos de mapas 3D usando o
scatter,scatter3d,surfaceemesh3dmódulos de rastreamento. A versão compactada e minificada deste pacote tem um tamanho de 354 kB. -
gl2d: Este pacote contém o
scatter,scattergl,pointcloud,heatmapgl,contourgleparcoordsmódulos de rastreamento. Tem um tamanho de 362,9 kB após minificação e compressão. -
caixa de mapas: Este pacote contém o
scatterescattermapboxmódulos de rastreamento. O tamanho do arquivo neste caso é 328,6 kB. -
finança: o pacote financeiro pode ser usado para criar séries temporais, velas e outros tipos de gráficos para plotar dados financeiros. Este módulo consiste em
scatter,bar,histogram,pie,ohlcecandlestickmódulos de rastreamento. - rigoroso: O pacote restrito inclui tudo o que o pacote normal possui, mas evita construtores de função. Este pacote é 10% maior que o pacote padrão, portanto, não o use a menos que realmente precise.
Usando Plotly para criar um gráfico
Depois de decidir os gráficos que deseja criar e carregar o pacote apropriado em sua página da Web, você pode começar a criar seus próprios gráficos usando Plotly.js. A primeira coisa que você precisa fazer é criar um arquivo vazio div elemento onde o gráfico deve ser desenhado.
Tenha alguns dados prontos que você deseja plotar no gráfico. Neste exemplo, estou apenas usando alguns números aleatórios para criar o gráfico. Finalmente, você deve ligar para o plot() função e fornecê-lo com todas as informações como o contêiner div, os dados e as opções de layout. Aqui está o código para criar um gráfico de linhas muito básico:
// if you are using npm and esm add
// import Plotly from "plotly.js"
const lineDiv = document.getElementById('line-chart');
const traceA = {
x: [1, 2, 3, 4, 16, 17, 26],
y: [1, 40, 9, 60, 4, 20, 10],
type: 'scatter'
};
const data = [traceA];
const layout = {
title: 'A Line Chart in Plotly'
};
Plotly.newPlot( lineDiv, data, layout );
Todos os gráficos em Plotly.js são criados declarativamente usando objetos JSON. Cada propriedade do gráfico, como sua cor e dados, possui um atributo JSON correspondente que pode ser usado para personalizar totalmente a aparência e o comportamento do gráfico.
Os atributos podem ser divididos em duas categorias. A primeira chama-se vestígios, que são objetos usados para fornecer informações sobre uma única série de dados a serem plotados no gráfico. A segunda categoria é esquema, que fornece diferentes atributos que controlam todos os outros aspectos do gráfico, como título ou anotações. Diferentes traços são ainda categorizados pelo tipo de gráfico, e os atributos que estão disponíveis para você desenhar o gráfico dependerão do valor do gráfico. modelo atributo.
No exemplo acima, criamos um traceA objeto que armazena o tipo de rastreamento e os dados que você deseja plotar no gráfico. A demonstração do CodePen a seguir mostra o resultado final do código acima.
Como você pode ver na demonstração, você pode ampliar, reduzir ou dimensionar automaticamente o gráfico. Você também pode baixar o gráfico como uma imagem. O gráfico em si parece muito profissional com suas linhas nítidas.
Atributos de layout para personalizar os gráficos
No restante dos tutoriais desta série, vamos nos concentrar em aprender sobre diferentes atributos relacionados a tipos de gráficos específicos, como gráficos de linhas e barras. Antes de fazer isso, você também deve ter algum conhecimento básico de diferentes atributos de layout que controlam aspectos comuns a todos os tipos de gráficos, como a fonte, o título, o eixo x, o eixo y etc.
Você pode especificar uma fonte global que deve ser usada ao criar traços e outros componentes de layout, como os eixos e o título. As opções são especificadas usando o font objeto, e esses valores são usados por padrão por todos os componentes do gráfico. o color, size e family as chaves estão aninhadas dentro do font chave. Você pode usá-los para definir a cor da fonte global, o tamanho da fonte global e a família de fontes global, respectivamente.
Cada gráfico tem um title atributo que pode ser usado para definir o título do gráfico atual. Ele fornece ao usuário algumas informações sobre o que você está plotando no gráfico. As propriedades da fonte para o título podem ser especificadas usando o titlefont atributo. Assim como o mundial font atributo, o color, size e family chaves aninhadas dentro do titlefont O atributo pode ser usado para controlar as propriedades relacionadas à fonte do título.
Você pode especificar a largura e a altura de um gráfico em pixels usando o width e height chaves. Você também pode controlar o espaçamento ao redor do gráfico, bem como a área de plotagem usando diferentes atributos aninhados sob o margin chave. Todos os valores são especificados em pixels.
A margem esquerda é especificada usando o l atributo, a margem direita usando o r atributo, a margem superior usando o t atributo e a margem inferior usando o b atributo. A área de plotagem e as linhas do eixo estão muito próximas umas das outras por padrão. Você pode adicionar algum espaço ao redor da área de plotagem usando o pad atributo aninhado dentro do margin chave. O preenchimento é especificado em pixels e seu valor padrão é zero.
Você pode escolher suas próprias cores para o plano de fundo de todo o gráfico, bem como a área de plotagem para combinar com o tema do seu site. Ambas as cores são definidas como brancas por padrão, mas você pode especificar um valor diferente para cada uma delas usando o paper_bgcolor e plot_bgcolor chaves respectivamente.
Você também pode especificar o título e diferentes propriedades de fonte para todos os eixos do gráfico. As propriedades da fonte são aninhadas dentro das chaves de eixo para os respectivos eixos. Você também tem a capacidade de controlar independentemente a cor base do eixo e a cor da fonte usada para seu título.
Às vezes, os pontos que estão sendo plotados em um gráfico não chegam a zero. Nesses casos, os ticks criados pelo Plotly em um eixo também não se estendem a zero. No entanto, se você quiser que os ticks comecem sempre do zero, independentemente do intervalo de pontos que está sendo plotado, você pode usar o rangemode atributo e defina seu valor para tozero.
O trecho de código a seguir usa alguns dos atributos que acabamos de discutir para modificar a aparência do gráfico que criamos na seção anterior.
const lineDiv = document.getElementById('line-chart');
const traceA = {
x: [25, 30, 35, 40, 45, 50, 55],
y: [40, 40, 20, 60, 40, 20, 50],
type: 'scatter'
};
const data = [traceA];
const layout = {
title:'A Line Chart in Plotly',
height: 550,
font: {
family: 'Lato',
size: 16,
color: 'rgb(100,150,200)'
},
plot_bgcolor: 'rgba(200,255,0,0.1)',
margin: {
pad: 10
},
xaxis: {
title: 'Distance travelled along x-axis',
titlefont: {
color: 'black',
size: 12
},
rangemode: 'tozero'
},
yaxis: {
title: 'Distance travelled along y-axis',
titlefont: {
color: 'black',
size: 12
},
rangemode: 'tozero'
}
};
Plotly.newPlot( lineDiv, data, layout );
Conclusão
Neste tutorial, você aprendeu sobre os diferentes recursos da biblioteca Plotly.js. Também abordei a instalação e o uso da biblioteca juntamente com diferentes atributos de layout para personalizar a aparência dos gráficos de acordo com suas necessidades.
Este post foi atualizado com contribuições de Jacob Jackson. Jacob é desenvolvedor web, redator técnico, freelancer e colaborador de código aberto.
