Conheça os Gráficos Lightweight 3.0

Jul 6, 2020

Estamos animados em lançar os Gráficos Lightweight 3.0. Adicionamos a capacidade de ter duas escalas de preços ao mesmo tempo, determinar a contagem de barras da esquerda/direita dos dados visíveis, usar seu próprio formato de data, substituir o intervalo de escala automática e muito mais. Nesta postagem, mostraremos cada uma dessas atualizações e mostraremos como começar a usar nossa versão mais recente do Lightweight Charts.

Breaking Changes

Primeiro de tudo, esta é uma versão importante da biblioteca, que possui algumas alterações:

  • Os dois métodos subscribeVisibleTimeRangeChange e unsubscribeVisibleTimeRangeChange foram movidos do ChartApi para TimeScaleApi;
  • Com a versão 3.0, você pode especificar o eixo de preços em que deseja colocar a série. O mesmo vale para mover a série entre escalas de preço.

Consulte o nosso documento sobre alterações recentes com um guia abrangente para ajudá-lo a migrar sem problemas.

Duas escalas de preços

Desde a nossa primeira versão pública, a biblioteca só conseguiu mostrar uma escala de preços ao mesmo tempo (da esquerda ou da direita), se houver. Com a versão 3.0, você poderá exibir até duas escalas de preço ao mesmo tempo. Isso significa que você pode adicionar duas séries diferentes no gráfico, colocá-las em diferentes escalas de preço (uma à esquerda e outra à direita) e as duas estarão visíveis. Além disso, você poderá colocar várias séries na mesma escala de preços, mesmo que seja uma sobreposição. Assim, crie seu próprio estudo com várias saídas, nas quais você pode produzir todas as saídas como uma série separada e colocá-las na mesma escala de preços para que elas sejam dimensionadas juntas.

Contando Barras e Visibilidade da Barra

Digamos que você desenvolva um aplicativo e precise implementar o carregamento contínuo de dados para quando um usuário rolar para a esquerda no histórico (visível aqui). Esse é um recurso bastante básico para soluções de gráficos.

A versão 3.0 da biblioteca possui muitas melhorias relacionadas a esse recurso. Por exemplo, agora você pode obter informações sobre quantas barras uma série tem à esquerda da barra visível ou à direita da barra visível. Agora você também pode fazer previsões e carregar novas barras à frente, para que os usuários não vejam atrasos no carregamento ou congelamento. Por exemplo, digamos que você comece a carregar barras adicionais quando um usuário rolar para a esquerda, para que o gráfico tenha as únicas 50 a 100 barras restantes no histórico.

Além disso, a API também pode ser aplicada a intervalos visíveis de sincronização suave (como visto no multichart do TradingView, por exemplo) entre vários gráficos. Quando um gráfico é movido, outros também são movidos.

Formatos de Data

Anteriormente, tínhamos uma lista codificada de formatos de data disponíveis (19 formatos no total), para que você não pudesse personalizar e usar seu próprio formato, o que seria mais adequado aos seus requisitos.

Na versão 3.0, alteramos isso, permitindo que você use qualquer sequência personalizada como formato de data. Por exemplo, você pode usar `aaaa-dd` ou mesmo `aaaa`, o que é adequado para gráficos sazonais.

Um formato personalizado pode ser qualquer sequência, contendo qualquer número de marcadores de data, que serão substituídos pelos valores de data correspondentes:

  • `aaaa` – ano completo (por exemplo, 2020)
  • `yy` – ano curto (por exemplo, 20)
  • `MMMM` – mês longo (por exemplo, julho)
  • `MMM` – mês curto (por exemplo, fev)
  • `MM` – mês numérico (com zero à esquerda, se necessário) (por exemplo, 03)
  • `dd` – dia do mês (com zero inicial, se necessário) (por exemplo, 15)

Substituindo a Faixa de Preço da Série

Por padrão, a biblioteca usa todos os dados visíveis no gráfico para calcular a faixa de preço no modo de escala automática. No entanto, se você quiser modificá-lo de alguma forma, por exemplo, se tiver certeza de que a série não terá valores negativos, altere a faixa de preço de uma maneira que permita que ela seja projetada como não negativo, e a biblioteca adotará a faixa de preço de acordo.

Capacidade de Adicionar um Texto ao Marcador de Série

Os marcadores da série são úteis para melhorar o UX de um gráfico. Eles permitem que você mostre marcadores (ou seja, setas, um círculo ou quadrado) ao lado das barras de uma série. Em nossa nova versão da biblioteca, você também pode especificar uma assinatura ou texto para cada marcador, permitindo adicionar legendas e notas.

API Para Converter o Tempo em Uma Coordenada e Vce-versa

Ocasionalmente, é necessário colocar uma dica ou texto na parte superior da biblioteca em um horário específico no gráfico. Em nossa versão 3.0, adicionamos a capacidade de converter o tempo em coordenadas X e vice-versa, fazendo com que a API defina a coordenada da tela. Além disso, agora você pode obter a largura da escala de preço visível (esquerda ou direita). Isso pode ser útil, por exemplo, se você tiver a escala de preço esquerda exibida e precisar obter uma coordenada exata dentro do gráfico.

Capacidade de Ocultar Marcas de Escala de Preços

As marcas na escala de preços podem parecer um pouco confusas para alguns, muitas vezes porque parecem o sinal de menos (-). No entanto, agora você pode desativar esse símbolo, fazendo com que a biblioteca pare de exibir. Isso significa que não há mais símbolos confusos preenchendo seu gráfico, se você preferir que esse espaço seja limpo.

Mais Recursos, Pacote Menor

Um dos significados de “leve” refere-se ao tamanho. A primeira versão da biblioteca era ~ 43,7KB em min.gz. Desde então, adicionamos muitos recursos novos e você pode pensar que o tamanho imita o crescimento dessas adições, mas é aí que você está errado.

Nesta versão, aplicamos várias técnicas para reduzir o tamanho da biblioteca, permitindo fornecer um tamanho de pacote menor. Portanto, a versão 3.0 da biblioteca é de 42,4 KB em min.gz, ainda menor do que antes, mas repleta de recursos e ferramentas adicionais.

Observe que as técnicas que usamos aqui não são específicas para gráficos leves. Ou seja, você também pode usá-los em seus projetos. Se você estiver interessado em aprender mais sobre o nosso processo, verifique as seguintes GH #436 e GH #432, que destacam a redução de tamanho na biblioteca. Nossos testes mostraram que essas técnicas podem reduzir o tamanho de um pacote em até 30% na forma não compactada e em até 10% em min.gz.

Um Agradecimento Especial à Nossa Comunidade

TradingView é uma comunidade de investidores, traders e programadores. Queremos agradecer a todos os nossos colaboradores que ajudaram nesta versão:

Temos Mais Para lhe Mostrar

Com este post, apenas arranhamos a superfície com relação às novidades do Lightweight Charts 3.0. Para ver uma lista completa de alterações, recomendamos que você verifique nossas notas do Github para obter mais detalhes e informações. Se você quiser saber mais sobre como Gráficos Lightweight podem ajudá-lo, visite nossa Biblioteca de Gráficos.

Esperamos que você tenha gostado desta atualização. Como sempre, continue enviando seus comentários, sugestões e feedback. É um prazer construir para você.

Look first Then leap

TradingView is built for you, so make sure you're getting the most of our awesome features
Launch Chart