Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 80
Tutorial para Criar um Gr�fico de Barras Verticais Coloridas

Neste tutorial veremos como criar um Gr�fico de Barras coloridas.
Vejamos ent�o o exemplo:
Nesse exemplo voc� poder� gerar gr�ficos de barras para qualquer finalidade com cada barra de uma cor diferente, cada uma representando uma empresa ou pa�s. Nesse gr�fico voc� poder� alterar a cor de cada barra individualmente, como tamb�, alterar os valores do eixo vertical. Para isso vamos utilizar a biblioteca Chart.js do JavaScript e apenas um arquivo HTML:
Arquivo graficoBarrasVerticaisColoridas.html:
<!DOCTYPE html> <html> <head> <title>Como Criar um Gr�fico de Barras Verticais Coloridas</title> <script src='/google_analytics_auto.js'></script></head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <body> <h2>Como Criar um Gr�fico de Barras Verticais Coloridas</h2> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <script> var xValues = ["Brasil", "Fran�a", "Espanha", "EUA", "Argentina", "Inglaterra"]; var yValues = [70, 59, 44, 34, 25, 21]; var barColors = ["#aaff00", "#0000ff","#ff0000","orange","brown","#ff00ff"]; new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "Produ��o Mundial de Vinhos de 2020" } } }); </script> </body> </html>
Veja na imagem abaixo o resultado desse c�digo::

<< Tutorial para Criar um Gr�fico de M�ltiplas Linhas
Tutorial para Encontrar o Fatorial de um N�mero >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino