Aprenda a fazer uma nuvem de etiquetas em Html CSS e Javascript
- #JavaScript
- #HTML
- #CSS
Construa passo a passo uma nuvem de etiquetas.
Salve padawan, vamos colocar a mao na massa?
Veja nosso exemplo em funcionamento:
https://vagnerbellacosa.github.io/WordCloudConcept/CloudConcept
Codificar um pouco, para aprimorar os conhecimentos em HTML, CSS e Javascript? Hoje vamos trabalhar com nuvem de etiquetas, ou no anglo-saxionismo: Word Cloud Concept. Nao faça essa cara, calma eu ja sei...
O que é Nuvem de Etiquetas?
Para aqueles que chegaram agora em nossa academia Jedi, nuvem de etiquetas são aquelas imagens com muitas palavras, que a galera usa e abusa nas redes sociais.
Em nosso projeto iremos trabalhar com texto estático, para conhecer os fundamentos e iremos usar uma biblioteca de gráficos, muito poderosa que tem em seu repositório inúmeros exemplos, que valem a pena serem estudados.
Biblioteca AnyChart
é uma biblioteca em Javascript que permite a criação de inúmeros tipos de gráfico, através de passagem de parâmetro, sendo incorporada em sua pagina HTML. Conheça mais neste link https://www.anychart.com/pt/
Vamos codar?
Este projeto esta dividido em 3 partes, arquivo Html com as chamadas ao anyChart, o CSS com o Estilo e o Javascript com os parametros. Simples e pratico.
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Tag Cloud Chart</title>
<!-- Apresentaçao -->
<title>JS Word Cloud Generater</title>
<link rel="shortcut icon" href="img/icoNumeEtiqueta.ico" type="image/x-icon">
<!-- Front-End -->
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</head>
<body>
<!-- Gerar Grafico -->
<div id="container"></div>
<!-- Script Gerador -->
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"> </script>
<script src="js/scrypt.js"></script>
</body>
</html>
CSS
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Javascript
anychart.onDocumentReady(function () {
// Data
// Array com 3 colunas, a palavra, um valor, uma categoria
var data = [
{"x": "Digital Innovation One", "value": 1090000000, category: "DIO"},
{"x": "Bootcamp", "value": 983000000, category: "Comunidade"},
{"x": "Labs", "value": 544000000, category: "Comunidade"},
{"x": "Projetos", "value": 527000000, category: "Comunidade"},
{"x": "Desafio Codigo", "value": 422000000, category: "Comunidade"},
{"x": "Artigos", "value": 281000000, category: "Comunidade"},
{"x": "Reputaçao", "value": 267000000, category: "Comunidade"},
{"x": "XP", "value": 261000000, category: "Comunidade"},
{"x": "Level", "value": 229000000, category: "Comunidade"},
{"x": "Vagner Bellacosa", "value": 229000000, category: "DEV"},
{"x": "DEV", "value": 150000000, category: "Comunidade"},
{"x": "Html", "value": 148000000, category: "Linguagem"},
{"x": "JavaScript", "value": 129000000, category: "Linguagem"},
{"x": "CSS", "value": 129000000, category: "Linguagem"},
{"x": "Game Developer", "value": 121000000, category: "Bootcamp"},
{"x": "C Sharp", "value": 121000000, category: "Linguagem"},
{"x": "Python", "value": 121000000, category: "Linguagem"},
{"x": "PHP", "value": 121000000, category: "Linguagem"},
{"x": "Java", "value": 121000000, category: "Linguagem"},
{"x": "Dot Net", "value": 121000000, category: "Linguagem"},
{"x": "Angular", "value": 121000000, category: "Linguagem"},
{"x": "ReactJS", "value": 121000000, category: "Linguagem"},
{"x": "MS SQL", "value": 121000000, category: "Base de Dados"},
{"x": "Become Remote", "value": 121000000, category: "Bootcamp"},
{"x": "My SQL", "value": 121000000, category: "Base de Dados"},
{"x": "Cloud Computer", "value": 121000000, category: "Arquitetura"},
{"x": "Azure", "value": 121000000, category: "Arquitetura"},
{"x": "Blockchain", "value": 121000000, category: "Tecnologia"},
{"x": "Linux", "value": 12100000, category: "Sistema Operacional"},
{"x": "Android", "value": 12100000, category: "Sistema Operacional"},
{"x": "IOS", "value": 12100000, category: "Sistema Operacional"},
{"x": "Windows", "value": 12100000, category: "Sistema Operacional"},
{"x": "Kotlin", "value": 12100000, category: "Framework"},
{"x": "MS-DOS", "value": 121000, category: "System"} ];
// Criando nosso grafico de Nuvem de Etiquetas
var chart = anychart.tagCloud(data);
// Definindo o titulo
chart.title('Digital Innovation One')
// Vamos setar o angulo das palavras e a disposiçao dentro da nuvem
chart.angles([0, -45, 90])
// Atividando as cores
chart.colorRange(true);
// definindo o range e a transparencia das cores
chart.colorRange().length('80%');
// definindo a cor do background
chart.background().fill({// keys: ["#fff", "#66f", "#fff"], keys: ["#000", "#000", "#000"], angle: 130,});
// font-family: 'Anton', cursive;
// montando o grafico
chart.container("container");
chart.draw();
// algumas ferramentas
var formatter = "{%value}{scale:(1)(1000)(1000)(1000)|( dozen)( thousand)( million)( billion)}"; var tooltip = chart.tooltip();
tooltip.format(formatter);
});
Conclusao
Como pode ter visto, o anyChart é uma biblioteca poderosa e muito user friendly, podendo ser utilizada em inúmeros projetos de acordo com a sua necessidade, estude a documentação e faça os exemplos.
Deixo o projeto no Github, fique a vontade em copiar e bisbilhotar, mas deixe uma estrelinha :)
https://github.com/VagnerBellacosa/WordCloudConcept
Espero ter ajudado ate o próximo artigo.
Mais momento jabá, para distrair, visite meu vídeo e veja para onde fui desta vez : https://www.youtube.com/watch?v=K8C95S4LqPA
Bom curso a todos.
https://www.linkedin.com/in/vagnerbellacosa/
https://github.com/VagnerBellacosa/
