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