Use o Chart.js para transformar os dados em diagramas interativos

Sep 16, 2025
Como

Em teoria, a criação de diagramas não é difícil. Manipulando a trigonometria necessária para um gráfico de pizza está entre os trabalhos mais clássicos usados ​​para programadores de treinamento. Há muitas bibliotecas de diagramação disputando as atenções dos desenvolvedores agora, mas neste artigo, vamos nos concentrar em como usar o Chart.js de ferramentas de código aberto.

Vamos colocar a biblioteca através de seus passos, criando um conjunto de diagramas imprimíveis de dados gerados aleatoriamente. Gráfico.js é um especialmente popular Tool Web Design. Porque oferece um trade-off exclusivo entre facilidade de uso e recursos avançados, permitindo que você crie gráficos interativos e envolvendo infográficos .

Com o Chart.JS, você pode escolher entre oito tipos de gráficos diferentes para adicionar aos seus sites com um mínimo de esforço. O módulo de animações recentemente adicionado enriquece os diagramas com recursos visuais estampados. Criando um novo site para abrigar seus diagramas? Consiga seu hospedagem na web. local em e não se esqueça de tentar um top Construtor de sites . Ok, vamos começar.

Clique no ícone no canto superior direito de cada imagem para aumentá-lo.

01. Implantar a biblioteca

Como o uso do Chart.js é generalizado, você pode encontrar sua versão minified em vários CDNs, como CloudFlare. Simplesmente carregá-lo com um & lt; script & gt; tag e garantir que um & lt; lona & gt; Objeto está próximo - Gráfico.js faz sua magia usando a infraestrutura de renderização fornecida neste widget. 

 & lt; html & gt;
& lt; head & gt;
& lt; script src = "https.cloudflare.com/ajax/libs/chart.js/2.4.0/
Gráfico.min.js "& gt;
& lt; / script & gt;
& lt; / head & gt;
& lt; corpo e gt;
& lt; canvas id = "workarea" & gt;
& lt; / lona & gt;
& lt; / corpo & gt;
& lt; / html & gt;

02. Iniciar inicialização.

First, load up the framework

Primeiro, carregue a estrutura

Quando a estrutura é carregada, a próxima etapa envolve a obtenção de uma alça de tela2d apontando para o & lt; lona & gt; instância criada na etapa anterior. Isso pode então ser usado para criar uma nova instância do Gráfico() classe, responsável pelo manuseio de dados, renderização e interação. 

 & lt; script & gt;
(função () {
var ctx = documento.
getelementbyid ('WorkArea'). GetContext ('2D');
var chart = novo gráfico (CTX,
{
Tipo: 'linha',
Opções: {},
. . .
});
}) ();
& lt; / script & gt;

03. Adicione uma fonte de dados

line chart

Para o nosso gráfico de linha, apenas um conjunto de dados é necessário

Classes de gráficos fazem um ponteiro de dados que fornece um ou mais DataSet. objetos contendo as informações de medição reais. No caso do nosso gráfico de linha, é necessário apenas um conjunto de dados. Ele vem com o elemento de dados obrigatório e alguns parâmetros opcionais que regem o processo de exibição real. 

 var chart = novo gráfico (ctx, {
Tipo: 'linha',
Opções: {},
dados: {
Etiquetas: ["janeiro",
"Fevereiro", "Março", "abril", "maio", "junho",
"Julho"],
DataSets: [{
Etiqueta: "Meu primeiro conjunto de dados",
cor de fundo:
        'RGB (255, 99, 132)',
Cor da borda:
'RGB (255, 99, 132)',
Dados: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Pare de qualquer cintilação

Gráfico.js vem com lógica sofisticada de redimensionamento, que - infelizmente - tende a obter tamanhos de tela errados de vez em quando. Limitando o tamanho do & lt; lona & gt; Elemento via CSS, infelizmente, não faz o truque. Em vez disso, tanto a manutenção quanto a responsividade da proporção devem ser desativadas através do campo de opções que acompanham o construtor de classes de gráfico. 

 & lt; canvas id = "WorkArea" estilo = "largura: 800px;
Altura: 600px; "& gt; & lt; / lona & gt; & lt; / lona & gt;
& lt; script & gt;
(função () {
var ctx = documento.
getelementbyid ('WorkArea'). GetContext ('2d');
var chart = novo gráfico (CTX,
{
Tipo: 'linha',

Opções: {
Responsivo: Falso, MantenhaAspectratio:
FALSE},

05. Adicione layouts.

Parafrasear Andrei Tupolev: Agora que o pequeno está voando, vamos trazer o maior. O andaime mostrado acompanhando esta etapa 'multiplica' nosso diagrama - em vez de trabalhar com um elemento de lona, ​​agora criamos um total de quatro deles e organizá-los na tela de uma forma semelhante a um osciloscópio de lecroiro. Infelizmente, isso não funciona bem como pretendido. 

 & lt; canvas id = "workarea"
estilo = "posição: Absoluto; Top: 0%; esquerda: 0%;
Largura: 49%; Altura: 49%; "& gt; & lt; / lona & gt; & lt; / lona & gt;
& lt; canvas id = "workarea2"
estilo = "posição: absoluto; top: 0%; esquerda: 51%;
Largura: 49%; Altura: 49%; "& gt; & lt; / lona & gt; & lt; / lona & gt;
& lt; canvas id = "workarea3"
estilo = "posição: absoluto; top: 51%; esquerda: 0%;
Largura: 49%; Altura: 49%; "& gt; & lt; / lona & gt; & lt; / lona & gt;
& lt; canvas id = "workarea4"
estilo = "Posição: Absoluto; Top: 51%; esquerda: 51%;
Largura: 49%; Altura: 49%; "& gt; & lt; / lona & gt; & lt; / lona & gt;

06. Tame todos os erros de renderização

Wrapper <div> tags enforce a structure from the outside

Wrapper & lt; div & gt; Tags reforçam uma estrutura do lado de fora

A maneira mais segura de lidar com diagramas Chart.js em layouts complexos envolve usar o wrapper & lt; div & gt; Tag. Eles aplicam uma estrutura do exterior, garantindo assim que o motor de layout interno não possa fazer mais mal do que o necessário. Nesse caso, no entanto, certifique-se de reativar o recurso de responsividade. 

 & lt; div estilo = "posição: Absolute; Top: 0%; esquerda:
0%; Largura: 49%; Altura: 49%; "& gt;
& lt; canvas id = "workarea" & gt; & lt; / lona & gt; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; div estilo = "Posição: Absoluto; Top: 0%; Esquerda:
51%; Largura: 49%; Altura: 49%; "& gt;
& lt; canvas id = "workarea2" & gt; & lt; / lona & gt; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; div estilo = "Posição: Absoluto; Top: 51%; Esquerda:
0%; Largura: 49%; Altura: 49%; "& gt;
& lt; canvas id = "workarea3" & gt; & lt; / lona & gt; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; div estilo = "Posição: Absoluto; Top: 51%; Esquerda:
51%; Largura: 49%; Altura: 49%; "& gt;
& lt; canvas id = "workarea4" & gt; & lt; / lona & gt; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; script & gt;
document.addeventlistener ("DomContentl
OADED ", função () {
var ctx = documento.
getelementbyid ('WorkArea'). GetContext ('2d');
var chart = novo
Gráfico (ctx, {
modelo:
'linha',
Opções:
{},

07. Tente barras

Creating bar charts is simple

Criando gráficos de barras é simples

Sempre renderizar gráficos de linha fica tedioso rapidamente. Vamos abaixar as coisas mudando a propriedade do tipo para barra, produzindo assim diagramas de barras, como aquele mostrado na figura que acompanha esta etapa. Promovemos o campo de dados para o escopo "global", a fim de eliminar a reutilização. 

 & lt; script & gt;
document.addeventlistener ("DomContentLoaded", função () {
var myfield = {
Etiquetas: ["Janeiro", "fevereiro", "March", "Abril", "May", "junho", "julho"],
DataSets: [{
rótulo:
"Meu primeiro conjunto de dados",

BackgroundColor: 'RGB (255, 99, 132)',

BorderColor: 'RGB (255, 99, 132)',
Dados: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
ctx = documento.
GetElementByID ('WorkArea4'). GetContext ('2d');
gráfico = novo gráfico (ctx, {
Tipo: 'bar',
Opções: {},
Dados: myfield.
});
});
& lt; / script & gt;

08. Evite tortas

pie charts taking over the screen

Gráficos de pizza exigem tratamento especial se você não quiser que eles preencham toda a sua tela

Em teoria, um gráfico de pizza pode ser renderizado ao longo das mesmas linhas. Remova as propriedades da cor para evitar a aparência uniforme e definir a propriedade Tipo para torta. Infelizmente, isso não funciona bem - quando feito, o gráfico de pizza preencherá a tela inteira. Isso é causado por uma especialidade do renderizador da torta que usa o 'maior' das duas propriedades para determinar o raio da torta. 

 var mypie = {
Etiquetas: ["Janeiro", "fevereiro", "March", "Abril", "May", "junho", "julho"],
DataSets: [{
Etiqueta: "Meu primeiro conjunto de dados",
Dados: [0, 10, 5, 2, 20, 30, 45],
}]
};
ctx = document.getelementbyid ('WorkArea2').
getContext ('2D');
gráfico = novo gráfico (ctx, {
Tipo: 'torta',
Opções: {},
Dados: mypie.
});

09. Resolva o problema

Abra o arquivo 'index.js' criado na etapa 1. Comece especificando o tipo de gráfico como linha e adicionando os dados a serem representados visualmente conforme mostrado abaixo. 

 & lt; corpo e gt;
& lt; div estilo = "posição: absoluto; top: 0%;
Esquerda: 0%; Largura: 49%; Altura: 49%; "& gt;
& lt; canvas id = "workarea" & gt; & lt; /
canvas & gt; & lt; / lona & gt;
& lt; / div & gt;
& lt; div estilo = "posição: absoluto; top: 0%;
Esquerda: 51%; Largura: 29%; Altura: 49%; "& gt;
& lt; canvas id = "workarea2" & gt; & lt; /
canvas & gt; & lt; / lona & gt;
& lt; / div & gt;

10. Deixe o gráfico.js rescate o diagrama

Outra abordagem para resolver o problema envolve re-desabilitar o MantenhaAspectratio. recurso.Dessa forma, o motor de diagramação é permitido a redesclar o diagrama, pois vê apto, garantindo que o círculo inteiro apareça na tela. 

 CTX = Document.GetElementByID ('WorkArea2').
getContext ('2d');
gráfico = novo gráfico (ctx, {
Tipo: 'torta',
Opções: {MakeeningAlasPectratio: Falso
},
Dados: mypie.
});

Próxima Página: Conclua criar seu gráfico interativo com o Chart.js

  • 1.
  • 2.

Pagina atual: Usando o Chart.JS: Etapas 01-10

Como - Artigos mais populares

Construa uma UI controlada por voz

Como Sep 16, 2025

Nós vimos muitas novas APIs adicionadas à Web nos últimos anos que realmente permitiu que o conteúdo da Web tenha o mesmo tipo de funcionalidade que muitos aplicativos tiveram por algum t..

Mestre ambientes de grande escala em 3ds max

Como Sep 16, 2025

O objetivo desta peça era produzir um pedaço de Arte 3D. Isso está pronto para ir direto do buffer de quadros, ..

Como desenhar um nariz

Como Sep 16, 2025

Dominando como desenhar um nariz é uma das partes mais complicadas de desenhar um rosto. Talvez seja a diversidade de formas que..

3 dicas para criar material promocional de impressão impressionante

Como Sep 16, 2025

Em um mundo cada vez mais digital, o material promocional de impressão inteligente tem o poder de causar um impacto sério. Talv..

Pinte uma vida expressiva em acrílicos

Como Sep 16, 2025

Ainda vida não é a xícara de chá de todo mundo - é preciso um certo conjunto de Técnicas de pintura - Mas para mim, sempre foi favorito. Eu gosto de ter controle total so..

Crescer plantas em Houdini

Como Sep 16, 2025

O ponto forte de Houdini sempre foi sua natureza processual. Com alguns nós e um pequeno conjunto de expressões, você pode cri..

Faça um cartaz de um modelo no Photoshop

Como Sep 16, 2025

A Adobe está lançando uma nova série de tutoriais de vídeo hoje chamada Faça agora, que visa delinear como criar projetos de design específicos usando vários Nuvem criati..

Crie um auto-retrato com apenas 4 cores

Como Sep 16, 2025

O autorretralhador é um dos desafios mais recompensadores que um artista pode tentar. Porque conhecemos as paisagens de nossos p..

Categorias