Sempre quis aprender o Chart JS, mas precisava compreender as instruções de uma forma mais visual? Este site aborda o Chart JS com uma abordagem mais visual. O objetivo aqui é garantir um nível mais elevado de compreensão.
Guia em Vídeo do Chart JS
O Chart JS é uma maravilhosa biblioteca JavaScript com muitas opções, enquanto ainda sendo bastante compacta. Isso faz do Chart JS um verdadeiro tesouro. Há muitas possibilidades, mas se você não entender como, pode não percebê-las. Este site cobre o máximo possível sobre o Chart JS e todas as possibilidades. Pronto para explorar?
O que é o Chart.js?
Frequentemente, você ouvirá que o Chart.js é uma biblioteca ou estrutura JavaScript para desenhar gráficos em JavaScript. No entanto, o que é bastante surpreendente é que, uma vez que as pessoas usem o Chart.js, elas não percebem essa conexão com JavaScript.
Muitos tendem a esquecer que o Chart.js é baseado em JavaScript. O que eu me refiro é que eles não veem como combinar arrays em JavaScript junto com o Chart.js devido à complexidade da tag canvas que o Chart.js utiliza.
Um gráfico é desenhado em uma tag canvas. O código que o Chart.js utiliza é basicamente instruções para desenhar linhas, pontos, círculos e outras formas em um canvas em coordenadas x e y precisas. Uma vez que você entenda que o Chart.js é como um "Bootstrap" para canvas, para desenhar gráficos rapidamente, você terá uma compreensão melhor do que ele é.
O Chart.js economiza tempo, pois você não precisa aprender a API do canvas. O código do Chart.js é um modelo pré-escrito que a API do canvas pode ler e imediatamente desenhar o gráfico desejado. Essa ferramenta de economia de tempo ajuda você a avançar. Sem ela, você precisaria aprender como codificar em JavaScript para que a API do canvas possa ler (ou "interpretar", em termos de programação).
Vamos voltar à pergunta: o que é o Chart.js? É assim que eu definiria o Chart.js.
"Chart.js é um modelo de gráfico pré-escrito codificado em JavaScript que a API do canvas pode ler."
www.Chartjs3.com
Essa definição lhe dá um bom ponto de partida para trabalhar. Você instantaneamente entende que é JavaScript, mas também vê a conexão que o torna ligeiramente diferente. Ele é escrito para ser legível pela tag canvas. A API do canvas é escrita em JavaScript, mas o código é um pouco diferente.
Muitos enfrentam dificuldades porque não veem essa relação e não conseguem realmente entender o Chart.js em um nível mais profundo. Não entender como usar a API do canvas ou como escrevê-la em JavaScript não é algo ruim. Isso restringirá suas opções e limitará a interatividade do seu gráfico. Essa limitação é o que muitos experimentam como um obstáculo.
Por que você deseja usar o Chart.js e o obstáculo que isso representa
Muitos que desejam usar o Chart.js imaginam gráficos atraentes e interativos, nos quais os dados são extraídos de um banco de dados ou objeto JSON, e ao clicar em um botão, eles se transformam em algo novo e atualizado. Deveria ser mais do que um gráfico plano padrão que geralmente vemos no Ms. Excel. Infelizmente, uma vez que percebem que usar o Chart.js requer uma compreensão sólida de várias disciplinas (Javascript, Chart.js, API do canvas, MySQL, PHP, Node JS e mais), isso se torna um verdadeiro obstáculo para tornar o gráfico interativo.
Como superar o obstáculo no Chart.js?
O objetivo deste livro é superar o obstáculo que você enfrenta no Chart.js. Após observar que os tópicos de vídeo mais comumente assistidos estão relacionados ao Chart.js em conjunto com a interatividade, decidi escrever um livro sobre isso.
Este livro foi escrito para ajudá-lo a alcançar esse objetivo. Trata-se de um livro de vídeo visual. Isso significa que você aprenderá, mas todos os tópicos também estão em formato de vídeo para uma explicação e compreensão muito melhores. Muitos programadores têm uma orientação visual, o que é por isso que trabalham com sites e programação. Ver isso funcionar e entender o como e o porquê é fundamental para aprender o Chart.js.
Por que a documentação do Chart.js não aborda tópicos de interatividade?
Você pode ter lido a documentação do Chart.js e descoberto que ela não entra em detalhes sobre interatividade. O objetivo da documentação do Chart.js é ajudá-lo a aprender como usar o Chart.js. Em outras palavras, isso está fora do escopo deles. Como eles desejam explicar como desenhar gráficos. Eles não abordam como criar interatividade, pois isso é considerado JavaScript, código da API do canvas, MySQL ou outros temas não relacionados ao Chart.js. Eles e corretamente esperam que você visite o site deles porque deseja aprender como desenhar um gráfico no Chart.js.
Chart.js é chamado de um Framework JS. Um framework é composto por duas palavras, que são "frame" e "work". Isso significa que você trabalha dentro de um escopo ou estrutura fixa. Pode ser comparado a uma moldura de imagem, que é como uma "fronteira" (pense em CSS). Tudo fora dessa fronteira está fora do escopo e não é coberto pelo Chart.js.
Por quê? Se você deseja aprender o Chart.js com MySQL, eles esperam que você estude a documentação do MySQL, pois não estão aqui para ensinar isso. Embora sejam úteis quando combinados, a Documentação do Chart.js evita cobrir esses tópicos para manter a documentação concisa. Caso contrário, a documentação se tornaria enorme e difícil de gerenciar. Pense em todos os tópicos que eles precisariam abordar, que incluem muitos outros frameworks e linguagens de programação.
Documentação Interativa do Chart.js
Você tem uma compreensão sólida de por que a documentação atual do Chart.js está escrita da maneira como está. Agora é hora de adicionar uma camada de complexidade, que é cobrir as partes interativas do Chart.js.
Para criar um gráfico interativo, você precisará conhecer várias linguagens e tópicos dentro do JavaScript.
- Campos de entrada HTML: Os campos de entrada são o ponto de partida para a interatividade em um gráfico.
- Arrays em JavaScript: Sem o entendimento disso, você não será capaz de manipular os dados de nenhuma maneira ou formato.
- Funções em JavaScript: Funções são necessárias para criar uma resposta quando um botão é clicado ou um efeito de hover é acionado.
- API do Chart.js: O Chart.js abrange alguns tópicos avançados que ajudam com itens relacionados à tag canvas.
- Banco de dados (MySQL, MongoDB, etc.): Para a conexão com o banco de dados, existem muitas opções possíveis. Muitas pessoas estão migrando para uma linguagem de programação JavaScript de pilha completa, o que significa que o frontend e o backend são em JavaScript.
- Linguagens de Script do Lado do Servidor (PHP, Node.js, etc.): Essas são linguagens intermediárias essenciais que "comunicam" o frontend com o backend (banco de dados ou servidores).
Vamos abordar esses tópicos nos capítulos seguintes.
Capítulo 1: Criando um gráfico fixo no Chart.js
Criar um gráfico com o Chart.js é bastante simples. A documentação do Chart.js possui um código de demonstração agradável. No entanto, eles tendem a deixar de fora algumas explicações adicionais. A parte crucial são os blocos, que são pedaços de código que eventualmente são conectados de forma organizada. Eles têm um exemplo antigo que vem do Chart.js 2, e eu não recomendo o uso desse código específico. Aprenda o novo método.
Esses blocos geralmente são estruturados em três partes separadas, mas às vezes pode haver mais se o gráfico tiver alguns ajustes personalizados. Esses blocos podem ser considerados o esqueleto ou a base do código do Chart.js. Nos vídeos, costumo me referir a eles como:
- Bloco de Configuração ou Dados
- Bloco de Configuração
- Bloco de Renderização ou Inicialização
Bloco de Configuração ou Dados
O bloco de configuração ou dados consiste em todos os dados padrão que usamos em nosso gráfico. Isso inclui rótulos, conjuntos de dados, dados (pontos) e muito mais.
Bloco de Configuração
O bloco de configuração consiste na referência ao bloco de dados, nas opções e no tipo de gráfico.
Render block
O bloco de renderização ou inicialização inicia ou ativa o processo de desenhar o gráfico na tag canvas à qual se refere.
Código de bloco esqueleto do Chart.js em vídeo
Este vídeo aborda como pegar o código de demonstração antigo da documentação do Chart.js e convertê-lo para a versão mais recente, à medida que o Chart.js começa a adotar essa estrutura.
Se você estiver interessado em obter o código-fonte exato, pode encontrar a página completa com mais explicações nesta página específica.
Isso inclui o mesmo vídeo, além de informações adicionais sobre os blocos do Chart.js e o código-fonte.
Capítulo 2: Explorando os blocos de renderização, configuração e dados.
Enquanto o bloco de renderização abrange o desenho do gráfico, o que explica por que é chamado de bloco de renderização ou inicialização. A inicialização se refere ao início, então ele começa a desenhar o gráfico desde o início. Isso se torna mais importante quando você usa a API chart.destroy. Que é essencial se deseja alternar entre tipos diferentes de gráficos com um clique de botão.
Diferentes tipos de gráficos no bloco de configuração
O Chart.js 3 possui diversos tipos de gráficos disponíveis, tais como os seguintes tipos de gráficos:
- Gráfico de barras
- Gráfico de linha
- Gráfico de pizza
- Gráfico de rosca
- Gráfico de dispersão
- Gráfico de bolhas
- Gráfico de radar
- Gráfico de área polar
Além dos tipos de gráficos padrão, existem também mais opções, como o gráfico combo, mas essas são apenas as opções básicas integradas no Chart.js. Claro, se você for como a maioria, sempre gostará de brincar com gráficos mais avançados, que são mais personalizados. Por exemplo, um gráfico de histograma e outros, que são um pouco mais avançados e abordaremos posteriormente.
No entanto, alterar os tipos básicos de gráficos é bastante fácil de fazer. Ao olhar para o Chart.js, tudo o que você precisa fazer é ir para o bloco de configuração e inserir o tipo de gráfico desejado.
// bloco de configuração
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Aqui você pode ver o item em negrito que deve ser ajustado. No entanto, o que você precisa fazer se desejar criar uma camada de interatividade?
Embora os tipos sejam um item interessante, eles são bastante diretos. A maioria dos tipos de gráficos tem muitas semelhanças, mas alguns são diferentes e podem ou não ter um eixo, como o gráfico de pizza e o gráfico de rosca. Ou eles podem conter uma estrutura diferente, como o gráfico de radar. Abordaremos isso com mais detalhes em breve, mas primeiro vamos avançar para como modificar os dados.
Bloco de Dados e Conjuntos de Dados
A parte mais importante, onde a maior parte da atenção se concentra, é em relação ao conjunto de dados. O conjunto de dados é o bloco que abrange o desenho dos pontos de dados. O objetivo do gráfico é transmitir uma história de números por meio de uma imagem, tornando os números facilmente compreensíveis para a mente.
Embora seja fácil codificar os números diretamente, torná-los mais flexíveis é um desafio. A principal razão para isso é a manipulação de arrays. Ser capaz de manipular os dados do array ajuda a mostrar apenas os valores que precisam ser vistos.
Muitas pessoas que trabalham com o Chart.js tendem a não entender completamente esta parte. A principal razão é que elas veem o Chart.js de maneira diferente. Muitas vezes, quando descobrem que uma grande parte do Chart.js é baseada em arrays, percebem que o Chart.js é verdadeiramente JavaScript, mas com uma grande quantidade de código da API do canvas anexado.
Como você modifica um array?
Modificar um array normalmente envolve o uso dos quatro métodos mais comuns, mas o JavaScript possui uma lista inteira de métodos de array para você usar. Se você realmente deseja entender isso, certifique-se de explorar a Série de Arrays do Chart.js. Ela aborda muitos itens diferentes.
No entanto, por enquanto, fornecer os quatro mais comuns é uma boa introdução. Se você quiser mais informações, certifique-se de explorar a série que abrange 19 vídeos diferentes sobre manipulação de arrays.
- Método Push de Array, adiciona um valor ao final do array.
- Método Pop de Array, remove o último valor do array.
- Método Unshift de Array, adiciona um valor ao início do array.
- Método Shift de Array, remove o primeiro valor do array.
With these four basic array methods you can do a lot. So how to use them? Let’s grab an example here.
const colors = ['red', 'blue', 'green'];
colors.push('yellow') // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop() // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift() // colors = ['red', 'blue', 'green'];Como você pode ver, cada método de array faz o que faz simplesmente anexando o item do array, que neste caso é 'colors', e adicionando o método de array no final. Se você adicionar um valor, como com push ou unshift, precisará definir o valor que será adicionado ao array.
Essa é a maneira mais fácil de trabalhar com arrays. Existe também outra maneira mais avançada e poderosa chamada estruturas de dados no Chart.js.
Estruturas de dados: uma maneira avançada para conjuntos de dados.
As estruturas de dados são uma das maneiras mais poderosas e avançadas de fazer as coisas. O Chart.js dedica apenas uma pequena seção a esse item, o que é uma pena, pois as estruturas de dados podem realmente simplificar a manipulação de arrays. Em essência, as estruturas de dados são objetos JavaScript que podem ser lidos diretamente em seu gráfico.
O Chart.js fez isso porque frequentemente recebemos dados de JSON ou em um objeto e modificar o objeto em vários arrays não faria sentido. Portanto, ensinar o Chart.js a ler uma estrutura existente seria muito melhor, o que eles introduziram com sucesso no Chart.js 3.1.
Para entender isso, existem vários vídeos que cobrem esse tópico em uma página separada. Certifique-se de assistir a todos os vídeos sobre estrutura de dados video.
No entanto, para garantir que você compreenda a essência, este vídeo lhe dará uma compreensão básica.
Os tópicos mais avançados relacionados às estruturas de dados podem ser encontrados na página de estrutura de dados . Altamente recomendado!
Para usar estruturas de dados, precisamos reatribuir os valores de x e y, pois precisamos indicar ao Chart.js de onde obter o ponto de dados, em vez de antes. Para isso, como você notará no vídeo, usamos a análise (parsing) e os atributos xAxisKey e yAxisKey.
Fazer a análise (parse) significa tornar algo legível para a linguagem na qual estamos realizando a análise. Neste caso, analisamos o novo objeto de dados para torná-lo legível para o Chart.js desenhar o gráfico.
As estruturas de dados são uma das melhores características do Chart.js, mas não são muito claras, já que você só as perceberá quando precisar trabalhar com dados e gráficos com frequência. Agora que entendemos a parte mais importante dos dados, devemos nos concentrar na funcionalidade.
Funcionalidade e Interações do Chart.js
Usar cores no Chart.js pode ser muito útil para destacar algo. Pontos de dados coloridos podem comunicar algo sem palavras. Por exemplo, quando colorimos um valor negativo de vermelho e um valor positivo de verde, estamos comunicando algo sem dizer uma palavra. Por mais intuitivo que seja, o usuário provavelmente entenderá.
As configurações de cor de fundo e cor da borda estão dentro do bloco de dados, dentro do conjunto de dados. O vídeo aqui controla opções básicas de codificação de cores, com verde e vermelho dependendo do valor.
Felizmente, essas opções ainda não são complicadas, pois funcionam com arrays. Uma vez que você entenda como adicionar valores a um array, pode começar a brincar com as cores de maneira mais intuitiva. Conforme você percebe, toda vez que adquire uma nova habilidade, pode expandir suas opções no Chart.js.
Tudo abaixo são conceitos específicos que precisarão ser reorganizados em capítulos.
Compreendendo a diferença entre Tempo e Séries Temporais no Chart.js
No Chart.js, frequentemente precisamos desenhar gráficos com datas específicas. Se você estiver criando um gráfico de mercado de ações em que seu gráfico tem dados apenas nos dias úteis, você terá dados ausentes ou estáticos nos fins de semana e feriados. Isso pode ser indesejável, e você pode querer remover essas datas específicas para manter o gráfico limpo.
Gráfico de Tempo no Chart.js
O tipo de tempo neste caso não é útil. Isso calculará o espaço com base na diferença do período de tempo. Por exemplo, se o próximo ponto de dados estiver a uma semana do ponto de dados atual, ele calculará 7 segmentos de espaço. Isso cria uma grande lacuna em nosso gráfico. Veja a lacuna nas escalas x abaixo.
Gráfico de Séries Temporais no Chart.js
O Chart.js possui um recurso embutido útil para resolver esse problema específico, que é a série temporal. Nela, ele define cada data com base em equidistância. "Equidistância" é derivado das palavras "igual" e "distante". Em outras palavras, ele define cada próximo ponto de dados em uma distância igual, independentemente do intervalo de tempo entre os anos. Veja a imagem abaixo:
Claro, ao fazer isso, precisaremos modificar como a escala apresenta as datas, pois elas podem se sobrepor se houver uma grande quantidade de dados comprimidos entre um segmento.
Como Criar uma Tabela a Partir de Conjuntos de Dados no Chart.js
Criar uma tabela com base nos dados do Chart.js requer um bom entendimento do JavaScript. Especificamente, como criar elementos de tabela e construir um objeto de tabela em JS.
Com o Chart.js, podemos extrair o objeto de dados, que está organizado de maneira organizada para desenhar o gráfico. Essa mesma parte dos dados é útil para criar a tabela. O vídeo abaixo mostrará exatamente como fazer isso.
Como Criar um Gráfico de Funil de Vendas no Chart.js
Criar um gráfico de funil de vendas no Chart.js é possível, mas requer alguma personalização avançada de plugins para fazê-lo funcionar. O que precisamos entender é como desenhar formas personalizadas que transformam as barras em um funil.
Se você está pronto para um nível avançado do Chart.js, neste caso, este vídeo será um ótimo desafio. Ele acompanhará o funil de vendas e cada etapa do funil, o funil diminuirá com base nos valores do conjunto de dados.
Como Salvar um Gráfico como Imagem no Chart.js
Para salvar e baixar um gráfico ou tela como imagem, precisaremos fazer algum trabalho. Por padrão, ao clicar com o botão direito do mouse, você pode baixar e salvar o gráfico como imagem. No entanto, isso não é muito óbvio para muitas pessoas, então criar um botão de download especial é uma ótima alternativa.
Como Baixar um Canvas como Imagem ao Clicar em um Botão no Chart.js.
O vídeo abaixo mostrará exatamente como fazer isso. Vamos converter o canvas em um arquivo PNG que podemos baixar e salvar em nosso dispositivo.
Curso na Skillshare em Breve!
Tenho trabalhado em alguns cursos na Skillshare. Se você ainda não tem a Skillshare e deseja explorar as opções deles, pode obter uma semana gratuita clicando no link abaixo. Este é um link de afiliado que me dará uma comissão se você se inscrever, e não custará nada durante esse período gratuito. A comissão que eu receber será reinvestida em tutoriais e pesquisa e desenvolvimento do Chart.js:
Portuguese (Brazil) 
English 
Chinese 
French 
German 
Korean 
Portuguese (Portugal) 
Spanish 
Vietnamese