0

Aprenda a fazer uma nuvem de etiquetas em Html CSS e Javascript

Vagner Bellacosa
Vagner Bellacosa

Construa passo a passo uma nuvem de etiquetas.


Salve padawan, vamos colocar a mao na massa?


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/


Pode me dar uma ajudinha no YouTube?


 https://www.youtube.com/user/vagnerbellacosa


0
0

Comentários (2)

0
Vagner Bellacosa

Vagner Bellacosa

11/08/2021 12:01

Celina, eu agradeço seu feedback. Juntos somos mais fortes.

1
C

Celina Takeda

11/08/2021 11:55

Obrigada por compartilhar.

Analista Programador dinossauro IBM Mainframe

Brasil