Você está pronto para criar seus próprios gráficos com o Chart.js de uma forma mais visual?
Por que este Guia em Vídeo do Chart.js?
Este guia de documentação em vídeo do Chart.js foi projetado para cobrir os tópicos do Chart.js de uma forma mais visual. O Chart.js é uma maravilhosa biblioteca de JavaScript. Ele tem tantas opções e muitos segredos ocultos.
Uma grande dificuldade para muitos desenvolvedores é entender o Chart.js. A documentação oficial do Chart.js é maravilhosa, mas às vezes é um desafio maior para muitos que tendem a aprender mais rapidamente no formato de vídeo. Este guia foi projetado para ajudar os aprendizes visuais a entender o Chart.js mais rapidamente.
Por favor, observe que este guia em vídeo do Chart.js não faz parte do guia oficial.
Por que criei o Guia em Vídeo do Chart.js?
Eu amo o Chart.js e é realmente divertido ver gráficos em um site. Meu objetivo é que, com a ajuda de um guia mais visual, mais pessoas possam se juntar à comunidade do Chart.js. Uma grande comunidade do Chart.js implicaria em uma melhoria contínua no próprio Chart.js!
O objetivo final é tornar o Chart.js tão fácil de aprender que, eventualmente, todos possam criar gráficos no Chart.js com facilidade!
- Começando
- Tipos de Gráficos
- Chart JS Banco de Dados
- Passo 1: Criando a Conexão com o Banco de Dados
- Passo 2: Adicionando o Código PHP no Arquivo HTML
- Passo 3: Criando um Gráfico de Barras com Arrays do Banco de Dados
- Passo 4: Criando um Gráfico de Barras com Arrays do Banco de Dados - Parte 2
- Passo 5: Adicionando Descrição de Dados no Banco de Dados
- Passo 6: Adicionando Etiquetas no Banco de Dados
- Passo 7: Manipulação de Arrays e Banco de Dados
- O plugin Datalabels do Chart.js
- 1. Como adicionar o Chartjs-Plugin-Datalabels ao Chart.JS
- 2. Namespace de Configuração no Plugin Chartjs Datalabels no Chart.JS
- 3. Opção de Posicionamento de Âncora no Plugin Chartjs Datalabels no Chart.js
- 4. Opção de Posicionamento de Alinhamento no Plugin Chartjs Datalabels no Chart.js
- 5. Opção de Cor de Fundo no Plugin Chartjs Datalabels no Chart.js
- 6. Opção de Cor da Borda no Plugin Chartjs Datalabels no Chart.js
- 7. Opção de Raio de Borda no Plugin Chartjs Datalabels no Chart.js
- 8. Opção de Exibição no Plugin Chartjs Datalabels no Chart.js
- 9. Opção de Cor e Fonte no Plugin Chartjs Datalabels no Chart.js
- 10. Opção de Preenchimento no Plugin Chartjs Datalabels no Chart.js
- 11. Opções de Layout no Plugin Chartjs Datalabels no Chart.js
- 12. Opções de Rotação no Plugin Chartjs Datalabels no Chart.js
- 13. Opções de Opacidade no Plugin Chartjs Datalabels no Chart.js
- 14. Opções de Formatação no Plugin Chartjs Datalabels no Chart.js
- 15. Opções de Ouvintes no Plugin Chartjs Datalabels no Chart.js
- 16. Opções de Cor de Contorno do Texto no Plugin Chartjs Datalabels no Chart.js
- 17. Opções de Desfoque da Sombra do Texto no Plugin Chartjs Datalabels no Chart.js
- 18. Opções de Limitação no Plugin Chartjs Datalabels no Chart.js
- 19. Opções de Recorte no Plugin Chartjs Datalabels no Chart.js
- Série de Arrays do Chart.js
- 1. Variável de Array no Chart.js
- 2. Push de Array no Chart.js
- 3. Pop de Array no Chart.js
- 4. Unshift de Array no Chart.js
- 5. Shift de Array no Chart.js
- 6. Preenchimento de Array no Chart.js
- 7. IndexOf de Array no Chart.js
- 8. Comprimento de Array no Chart.js
- 9. Inversão de Array no Chart.js
- 10. Método Slice de Array no Chart.js
- 11. Método Sort de Array no Chart.js
- 12. Método Sort Reverse de Array no Chart.js
- 13. Método Sort Integer de Array no Chart.js
- 14. Método Filter de Array no Chart.js
- 15. Método Filter de Array no Chart.js 2
- 16. Método Filter de Array no Chart.js
- 17. Eixos de Categoria Cartesianos de Array 1 no Chart.js
- 18. Eixos de Categoria Cartesianos de Array 2 no Chart.js
- 19. Eixos de Categoria Cartesianos de Array 3 no Chart.js
- Série do Plugin de Zoom do Chart.js
- Como Adicionar o Plugin Zoom do Chartjs no Chart.js
- Opções de Pan do Plugin Chartjs Zoom no Chart.js
- Opções de Modo de Pan do Plugin Chartjs Zoom no Chart.js
- Opções de Modificador de Pan do Plugin Chartjs Zoom no Chart.js
- Opções de Modo Overscale do Plugin Chartjs Zoom no Chart.js
- Opções de Limiar de Pan do Plugin Chartjs Zoom no Chart.js
- Opções de Zoom do Plugin Chartjs Zoom no Chart.js
- Opções de Zoom por Roda do Plugin Chartjs Zoom no Chart.js
- Opções de Velocidade de Zoom por Roda do Plugin Chartjs Zoom no Chart.js
- Opções de Modificador de Zoom por Roda do Plugin Chartjs Zoom no Chart.js
- Opções de Arrastar para Zoom do Plugin Chartjs Zoom no Chart.js
- Opções de Modo de Zoom do Plugin Chartjs Zoom no Chart.js
- Opções de Modo Overscale do Plugin Chartjs Zoom no Chart.js
- Opções de Cor de Fundo para Arrastar no Plugin Chartjs Zoom no Chart.js
- Opções de Cor de Borda e Largura do Plugin Chartjs Zoom no Chart.js
- Opções de Limiar para Arrastar no Plugin Chartjs Zoom no Chart.js
- Opções de Pinch para Zoom do Plugin Chartjs Zoom no Chart.js
- Botão de Redefinir o Zoom do Plugin Chartjs Zoom no Chart.js
- Botão de Ampliar do Plugin Chartjs Zoom no Chart.js
- Botão de Diminuir o Zoom do Plugin Chartjs Zoom no Chart.js
- Série de Cor de Fundo do Chart.js
- Cor de Fundo | Série de Cores de Fundo do Chart JS
- Array de Cores de Fundo | Série de Cores de Fundo do Chart JS
- Cor de Fundo Automática | Série de Cores de Fundo do Chart JS
- Função de Cor de Fundo Automática | Série de Cores de Fundo do Chart JS
- Opacidade da Cor de Fundo | Série de Cores de Fundo do Chart JS
- Cores Condicionais da Cor de Fundo | Série de Cores de Fundo do Chart JS
- Gradiente de Cor de Fundo Horizontal | Série de Cores de Fundo do Chart.js
- Gradiente de Cor de Fundo Vertical | Série de Cores de Fundo do Chart JS
- Gradiente de Cor de Fundo Diagonal | Série de Cores de Fundo do Chart JS
- Perguntas dos Espectadores do Chart.js
- Como adicionar um rótulo de dados apenas ao último ponto de dados de um gráfico de linhas | Chart.js
- Como usar um menu suspenso selecionável para atualizar os conjuntos de dados do gráfico | Chart.js
- Como destacar a seção correspondente do gráfico de rosca ao passar o mouse sobre a legenda | Chart.js | Parte 2
- Problema do efeito ao clicar em um gráfico de barras que mostra apenas a barra destacada após sair do mouse em Chart.js
- Como adicionar rótulos de dados no topo do gráfico de barras em Chart.JS?
- Como posso remover elementos de matriz no final de uma matriz em JavaScript? | Chart.js
- Como posso remover elementos de matriz no início de uma matriz em JavaScript? | Chart.js
- Como posso adicionar novos elementos de matriz no início de uma matriz em JavaScript? | Chart.js
- Como posso adicionar elementos de matriz no final de uma matriz em JavaScript? | Chart.js
- Como obter linhas curvas em vez de linhas retas no Chart.js
- Como posso mostrar pontos de dados correspondentes com base no clique na div correspondente no Chart.JS
- Como posso mostrar pontos de dados correspondentes com base no clique na div correspondente no Chart.JS Parte 2.
- Como adicionar bordas arredondadas em um gráfico de rosca no Chart.JS
- Como colocar cantos arredondados em um gráfico de barras no Chart.JS 3
- Como alternar conjuntos de dados com um botão no Chart.JS 3
- Como criar uma legenda personalizada no Chart.JS
- Como truncar rótulos no Chart.js mantendo o valor completo do rótulo nas dicas de ferramentas | Chart.JS
- Como ocultar linhas de grade no Chart.js 3
- Como girar o texto do rótulo em uma fatia de gráfico de rosca verticalmente no Chart JS
- Como girar o texto do rótulo em uma fatia de gráfico de rosca verticalmente no Chart JS Parte 2
- Como ocultar os nomes dos dados do eixo x no gráfico do tipo barra no Chart JS
- Como exibir na caixa de legenda xvalue, yvalue e rótulos no Chart.js
- Como criar um gráfico de linhas com preenchimento de gradiente vertical no Chart.js
- Como adicionar mais de um gráfico em uma página no Chart.js
- Como adicionar uma borda arredondada para um único dado em um gráfico de rosca no Chart.js 3
- Como criar um gráfico de barras empilhadas com conjuntos de dados empilhados uns sobre os outros com várias cores 2
- Como encurtar rótulos de dados longos no eixo y no Chart.js
- Como atribuir cores a um gráfico com base nos valores no Chart JS
- Como fazer um gráfico de linhas progressivo no Chart JS
- Como usar configuração e setup em um gráfico de linhas no Chart JS
- Gráfico de Pizza do Chart JS
- Gráfico de Barras do Chart JS
- Gráfico de Barras Horizontais do Chart JS
- Como alterar o rótulo com base no clique em um gráfico de barras no Chart JS
- Como usar a API de destruição de gráficos e renderizar um novo gráfico no Chart JS
- Como usar escalas de tempo e inserir datas e horários no Chart JS
- Exemplo de Gráfico de Bolhas do Chart JS
- Como criar um gráfico de barras com gradiente vertical usando o Chart JS
- Como criar um gráfico de barras com gradiente vertical usando o Chart JS Parte 2
- Como adicionar bordas arredondadas nas etiquetas da caixa de legenda no Chart.js
Portuguese (Brazil) 
English 
Chinese 
French 
German 
Korean 
Portuguese (Portugal) 
Spanish 
Vietnamese
Deixe um comentário
Você precisa fazer o login para publicar um comentário.