Aprenda a criar gráficos para web com Chart.js • HTML5/JS
HTML-код
- Опубликовано: 8 дек 2024
- Construir gráficos em um mundo cross-device é uma tarefa muitas vezes complexa e cansativa. E foi pensando nisso, que surgiu o framework Chart.js, que atualmente é considerado uma das bibliotecas mais performáticas para criação de WebGraphics baseados em canvas e de manipulação via javascript.
Aprenda nesta aula, a construir gráficos para web de maneira simples e flexível. Além da fácil implementação, o chart é um framework open source, responsivo e que fornece 8 tipos de gráficos diferentes e personalizáveis.
// INSCREVA-SE NO CANAL
goo.gl/Li0elq
// REDES SOCIAIS
1. Twitter: / leonardoferr_
2. Facebook: / ferreirastudios
3. Tecmundo: www.tecmundo.c...
// LINKS DO VÍDEO
ChartJs Docs - www.chartjs.org...
CDN ChartJs - cdnjs.com/libr...
ChartJs GitHub - github.com/cha...
GitHub Chartjs - github.com/cha...
// INSTALAÇÃO BOWER E NPM
npm install chart.js --save
bower install chart.js --save
Caceta velho, que fácil! Muito mais fácil que lendo a documentação que você recomenda, pois eu comecei por lá. Excelente explicação!
Alem de passar muito bem o assunto a qualidade do vídeo e áudio é perfeita, está tudo de parabéns! Excelente trabalho!
Coisa rara sou eu comentando em vídeos, mas você merece cara, muito bom, parabéns... LIKE...
Excelente, salvei e favoritei. Exatamente o que eu buscava pra levar meu projeto pessoal a outro nível, se eu conseguir fazer o que estou planejando irei colocar o resultado aqui. 😉 Valeu 👍.
muito bom! não tem porque não usar o chart.js.... obrigado pela aula !!!
Obrigado amigo, vc é um amigo
Eu que agradeço
Cara meus parabéns pelos seus vídeos!!
Eu tenho o costume de estudar por conta desenvolvimento e seus vídeos tem sido perfeitos! Obrigado pela partilha do conhecimento! Abraço.
Video muito bom e super legal!!! Estava precisando dessas informações. Quero que você faça mais vídeos sobre essa API. Valeu e muito sucesso!
Vai ajudar muito no gráfico que quero montar junto ao Google Sheets.. Obrigado!
Shooooow, ontem mesmo um pouco antes de sair do trabalho estava dando uma olhada no chartJS, e pensei em estudar ele na segunda, e agora você posta um vídeo.
shooooow, Parabéns pelo trabalho.
Nossa!!!! Que fantástico!!! Excelente didática!!!!
Direto ao ponto e com clareza! Parabéns!
parabens! Sua aula é focada, por isso tem 1000 likes pra 6 deslikes = 0,006%.
QUE VIDEO LINDO, MEU AMIGO!!!11!!1!onze!!!
Muito bom seu vídeo, rápido e objetivo, com uma ótima didática. Valeu!!!
Muito bom! Conteúdo sem enrolação.
show...o bagulho já é responsivo! legal msm
Já tinha ouvido falar nesse Chart.js. Bem bacana msm, e como vc mostrou, é super fácil de usar. Show de bola.
Show de bola rapaz !!! Otimo vídeo e excelente didática!!!
Muito Top! Justo o que estava precisando! VLW!
Sempre acompanho seu canal que a cada momento surge vídeos muito bons!
Obrigado por compartilhar seu conhecimento e me ajudou muito, pois tenho um projeto que vou precisar de um gráfico e já sei qual vou usar. kkkkkk
Obrigado pelos vídeos!
Abraço!
Show de bola!...
esse vai pro favoritos pq em breve vou usar !
Cara. Deus te abençoe. Sensacional....
Muito legal, super didatico e objetivo
Bom vídeo. Sou iniciante e não conhecia este framework. Ajudou muito! Vlw!
Cara muito obrigado, video muito objetivo e explicativo
Muito bom muito didático, e prático parabéns!
Cara muito bom! Valeu!
Salvou demais!! Muito obrigada!! :DD
Nossa! Muito obrigada pelo vídeo!! Me ajudou muito! Teria como mostrar em um próximo video como fazer gráfico em barras empilhadas?
Muito Boa Apresentação e muito explicativa!
Gostaria de um exemplo onde manipulo os data de forma reativa , a partir de cliques em botoes ou de bancos de dados.
Muito bom parabéns pelo conteúdo!!!
Obrigado por compartilhar seus conhecimentos!
Ferreira, faz um vídeo ensinando como fazer um jQuery slider com dots, paginator etc...
Ótimo vídeo!! =)
top de mais esses videos queria se pudesse que falasse um pouco sobre breakpoints como criar pontos de quebra na css para navs responsivas abco
Show de bola, obrigado!
Muito bom, valeu mesmo!!!
Mais um vídeo TOP !!!
Faz uma vídeo aula utilizando o chart.js com banco de dados, que a maior dificuldade de todos.
@Ismael, você quer puxar os dados da tabela do banco? Como eu falei no vídeo, basta fazer o return da tabela dentro de "data" ou você já seta o caminho real do .json que seu banco retorna.
Muito bom parabéns, mais seria bem legal se mostrasse em vídeo, muito top sua explicação!!
MUITO BOM CARA, MEU CHART FICOU SEXY AGORA.
Pro trick : you can watch series on flixzone. I've been using them for watching all kinds of movies lately.
@Merrick Gustavo Yup, been watching on Flixzone for months myself =)
Cara, te amoooooooo!
Muito bom mano
Top cara valeu mesmo.
Manoooo obrigado !!! Ajudou de mais +1 inscrito e +1 Like !
AMAAAAAAAAAAAAAAZING
Você sabe explicar como fazer a mixagem de gráficos? Lá no site do chart js tem mas eu não consigo, colocar os graficos diferentes ao mesmo tempo
valueu mano !
Muito Bom , me ajudou muito
Como faço pra colocar VALORES PERCENTUAIS %% nos grafícos ??
Boa noite, da pra plotar analises de redes/grafos com isso e salvar como arquivos executáveis, criar botões?
Amigão , posta um de chart.js + mysql por favoooor !!
Cara, mto bom.... me ajudou muito, mas tenho um problema que não consegui resolver...
Se um dos valores for "0" e eu quiser que o gráfico ignore (e deixe em branco esse campo) e continue desenhando no próximo valor (positivo ou negativo), como faço?
Obrigado pelo vídeo. Estou tentando buscar informações em uma planilha do google sheets para criar o gráfico. Mas mesmo lendo a documentação não estou conseguindo montar a URL + a consulta para filtrar os dados e jogar para o gráfico. Alguém por favor pode me dar uma dica de como fazer isto? Valeu!!!
Maravilha... como faz para trazer dados de uma consulta do BD para o datasets? Uso phpMyAdmin.
Cara, e como eu poderia adicionar uma outra escala do lado direito desse gráfico e fazer, por exemplo, um gráfico de barras abaixo dessas linhas correspondendo a escala que fica ao lado direito desse gráfico? Ou seja, fazer as barras seguirem a escala da direita e as linhas seguirem a escala da esquerda (ou vice-versa)?
Parceiro tem alguma configuracao para nao deixar os labels se sobreporem? agradecimentos
Olá excelente explicação, estou com uma dúvida e nao sei se é possivel ser feito, eu implementei no meu sistema financeiro e preciso que as informações do eixo Y fiquem sempre sempre visiveis dentro do gráfico acima da barra vertical, e não do lado esquerdo como padrão, nesse caso caso eu ocultaria as tooltips, seria possivel essa alteração? Obrigado.
Boa noite irmão, cara ótimo vídeo, porém sou leigo nesse assunto e preciso colocar um gráfico no meu site, como faço pra adaptar ele lá ??
Ótimo vídeo! Como eu configuro a vírgula como separador de milhar ??
muito bom
Eu tenho uma duvida, se tem como mesclar php com java no mesmo arquivo.php
Olá Leonardo, parabéns! pela excelente apresentação desse conteúdo, que é muito da hora e com uma variedade enorme de aplicações.
Tõ interessado em aplicá-lo num webbrowser de microcontroladores usados em IoT (internet das coisas), tipo ESP8266, ESP-01, ESP32, etc.
Pretendo usar o charts.js junto com sqlite para montar um dashboard embarcado!
Nesta demonstração entendi que vc colocou um link (url) ao chart.js, é possível baixar este arquivo para uso em rede local, sem internet?
Obrigado!
Eu to com um problema que o gráfico ta ocupando toda minha tela, ta responsivo, mesmo eu definindo width e height ele abre em todo o espaço da tela, alguém sabe como mudo o tamanho?
gostei muito!! ;D
Muito bom o vídeo.. mas como faço para formatar os valores do data
no formato decimal R$ 0,00 ?
Soundtrack name, plzz?
pode baixar a biblioteca chart.js para usar grafico offiline ?
Eai, pode?
Pode! Online é uma das opções.
Javascript é para ser processado no navegador gente(offline).
Top! Vlw!
poderia fornecer o código desse video?
Olá ! o Chartjs é realmente muito bom, o diferencial é que ele é bem simples não tem muitos detalhes como outros frameworks, e tem um bom visual, agora uma coisa que senti falta uma vez que ele tem o Doughnut é gauge, ele não tem gauge ( termômetros ou manômetros) embora pelo que eu entendi pode-se criar(fabricar) seu próprio gráfico será que isso é possível? eu andei pesquisando e não achei.
OLá, parabéns pelo vídeo! Aprendi muito!
Tenho uma dúvida: como eu faço para no lugar de
data : [ 5, 10, 5, 14, 20, 15, 6, 14, 8, 12, 15, 5, 10 ],
eu chamar um servlet que trará essa lista pronta?
Obrigado
Ferreira Studios Como adicionar o sinal de cifrão ($) antes dos valores? Para gerar esse resultado: R$ 9.000,00
top!!!
E possível fazer come esse só que em tempo real?
Gotaria de saber como fazer para o caso de quando cada dataset tem o seu proprio labels. Tipo:
var ctx = $("#myChart");
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Gcéu 1',
data: [{
x: new Date (2019,02,01),
y: 20
}, {
x: new Date (2019,02,02),
y: 10
}, {
x: new Date (2019,02,05),
y: 5
}]
},{
label: 'Gcéu 2',
data: [{
x: new Date (2019,02,02),
y: 15
}, {
x: new Date (2019,02,03),
y: 10
}, {
x: new Date (2019,02,10),
y: 2
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
Como fazer nesse caso? Pois o gráfico não sai.
Tem como criar um link em cada nó??
para ler json?
Olá, sou principiante em programação e estou criando um pequeno sistema para praticar minha aprendizagem. Eu criei um dashboard com alguns gráficos utilizando o Chart.js, porém em um dos gráficos que aponta por exemplo compromissos a pagar nos próximos 12 meses, os meses estão em inglês. Eu não posso criar os meses de forma estática, pois quem define os próximos doze meses é o sistema. No entanto, um amigo me deu uma dica dizendo que eu devo utilizar o "moment.js", um plugin que faz a tradução para outro idioma. Confesso que fiz o download, instalei e fiz a referência mas não consegui até agora fazer funcionar. Talvez eu não estou fazendo os procedimentos corretos. Você poderia me dizer o que e como fazer? Parabéns pelo vídeo, muito bom. Saudações.
Valeu!!!!!!!!!
Como consigo colocar dois gráficos lado a lado?
cara o meu não deu certo de jeito nenhum, eu acho que deve ser por que deu erros em instalar o chart.js no meu fedora ..
Não funcionou comigo :(
Separar dados do Excel de uma maneira simples? Tem como?
Nossa aqi funcionou tudo certinho, menos essa animação, o que devo saber, alguém me ajudaaaa pls
Cara nao sei porque mas nada aparece aqui. Nem a grade inicial
Conseguiu resolver? Comigo a mesma coisa!
Nao consegui aqui dever ser o smartscreen
manda esse teu código, to com preguiça de assistir o vídeo todo
Ola amigo, estou adorando seus vídeos, e gostaria de saber para incluir em bootstrap esses graficos e se é possivel buscar a base de dados do google. E se seria possivel montar bootstrap visual. minha intenção erá desenvolver algo assim: covid.saude.gov.br/
@@burn6170 Não consegui, estou apanhando até hoje.
55555