Gráfico de pizza CSS

Você já passou por qualquer artigo científico ou de pesquisa? Você já deu uma olhada no relatório anual de orçamento, fundo, PIB ou taxa de crescimento anual para algum estado ou instituição específica? Nesse caso, você pode ter encontrado os dados e informações sobre o tópico específico em gráficos que mostram as estatísticas da análise de dados feitas pelos especialistas. Esses gráficos e diagramas podem ser vistos em alguns sites padrão e oficiais. No HTML, temos algumas propriedades de estilo utilizadas no CSS para criar gráficos de pizza e diagramas. Neste artigo, discutiremos todas essas propriedades padrão para criar gráficos de pizza nas páginas da web html.

Exemplo 01:

Vamos começar com o exemplo mais básico do estilo HTML para criar um gráfico de pizza em nossa página da web html. Este exemplo começa com as tags html básicas - html, cabeça, estilo e corpo. Antes de modelar a página HTML, precisamos dar uma olhada em todos os seus elementos através da tag do corpo. O corpo da nossa página HTML contém um único título do maior tamanho, eu.e. H1. O título segue o elemento "div" para criar uma nova seção em nossa página. O elemento div é especificado com uma classe "PiechartContainer" e está fechado depois disso. O corpo desta página HTML é concluído aqui.

Agora, temos uma cabeça que segue a etiqueta "título" para dar um nome à nossa página da web. Dentro da tag de estilo CSS deste código, usamos o elemento "corpo" para estilizar todos os seus elementos combinados primeiro. Todos os corpos contêm a cor cinza de fundo. Agora, usamos a classe "PiechartContainer" com o ponto (.) personagem para criar um gráfico de pizza. O elemento div contendo esta classe recebe uma margem superior de 30 pixels, tela de bloco, posição absoluta, largura e altura de 500 pixels e borda de um raio de 50 %.

Junto com isso, usamos a propriedade de imagem de fundo para criar um gráfico de pizza com seu atributo "gradiente cônico". Precisamos dar os diferentes valores e cores para três seções cônicas do gráfico de pizza para as direções X, Y e Z. O valor total de 3 seções cônicas com três eixos - x, y e z - define a área para cada seção de maneira diferente. Vamos fechar a tag de estilo, salvar o código e executar este código no código do Visual Studio.

A saída deste código HTML mostra um título único e um gráfico de pizza exibido na tela da página da web html. O gráfico de pizza exibe 3 seções cônicas dentro dela com diferentes cores e porcentagens.

Exemplo 02:

Vamos começar com outro exemplo de HTML para criar um gráfico de pizza de um novo estilo. O mesmo formato HTML é utilizado neste arquivo. Demos uma olhada na área do corpo, juntamente com seu estilo para cada elemento da etiqueta de estilo do nosso código. A cor geral do corpo é definida como cinza através da propriedade "em segundo plano" usada para o ".corpo ”elemento. O corpo desta página HTML contém um único título de tamanho 1, seguido pela criação de um novo contêiner "div" especificado pelo ID "My-Pie-Chart-container". O cabeçalho não tem estilo enquanto a tela de contêiner é flexionada e os itens estão alinhados ao centro.

Dentro deste contêiner principal, criamos dois outros recipientes usando o elemento "div". O primeiro "div" é classificado pelo ID "my-pie-chart" e o segundo "div" é classificado pelo ID do "contêiner". O primeiro contêiner "div" com o "my-pie-chart" é usado para criar um gráfico de pizza em forma de círculo. Para isso, use sua classe "my-pie-chart" com a propriedade "plano de fundo" em uma tag de estilo. O atributo "gradiente cônico" é passado para a propriedade em segundo plano com cores diferentes e sua proporção dentro da porcentagem para exibir cada cor no gráfico de pizza com porcentagem e área selecionadas. A propriedade de Radius de Fronteira para este gráfico de pizza está definida como 50% com a largura e a altura de 200px.

Nosso gráfico de pizza é criado em forma de círculo. A segunda div com o ID do "contêiner" utiliza mais 8 recipientes dentro dele. O recipiente "div" com o ID do "contêiner" contém uma margem esquerda de 30px, fundo rosa de chá e preenchimento de 5px. Os 8 contêineres nesta seção "Div" são classificados pela classe "Entrada" que é estilizada com a tela Flex e os itens alinhados centrais. Todo elemento “div” desses 8 recipientes detém mais 2 recipientes dentro dele. O primeiro contêiner em cada um é classificado com a classe “Entry-Color” e o estilo embutido, adicionando a cor de fundo para cada. A classe “Entry-Color” para esta primeira “div” é usada para definir a largura e a altura para todas as 8 seções, i i.e. 15px Largura e altura para cada.

O segundo contêiner Div é classificado com o "título de entrada" junto com o título de um gráfico de pizza para cada área seccional. As margens superior e esquerda para esta seção são definidas como 5px e 3px, respectivamente. Todos os 4 elementos principais “div” estão fechados aqui. Vamos salvar e executar este código para ver o resultado do gráfico de pizza.

A saída mostra 1 título e 1 gráfico de pizza com um recipiente no lado esquerdo que exibe os títulos pertencentes a cada cor do gráfico de pizza.

Exemplo 03:

Começa com a cabeça 1 do maior tamanho em HTML. Em seguida, temos 5 elementos “div” utilizados para a criação de 5 gráficos de 5 pizza. Usamos o mesmo nome da classe para todos os 5 elementos div, eu.e. class = “torta”. Usamos o estilo em cada seção DIV para definir o valor percentual para cada gráfico de pizza com o uso do caractere “-P” definido como 20, 40, 95, 80 e 75. Junto com isso, a propriedade "-col" é usada para definir a cor para cada gráfico de pizza, exceto a primeira, eu.e. azul escuro, roxo, verde e amarelo. Os eixos X, Y e Z são definidos para todos os 4 gráficos de pizza que não sejam os primeiros.

Vamos dar uma olhada na etiqueta de estilo desta página HTML. Usamos a classe “torta” para estilizar o primeiro elemento div com uma porcentagem de 20 com a cor vermelha escura. Também espessura de borda, largura, proporção, estilo de exibição, margens e propriedades relacionadas a fontes diferentes são utilizadas para criar uma forma de gráfico de pizza padrão. Os compensações anteriores e depois são usados ​​para adicionar conteúdo e especificar a posição e o raio da borda para o elemento antes e depois do elemento de classe “torta”. Algumas outras propriedades de transição, transformação e tradução são utilizadas para estilizar os gráficos de pizza.

A saída para todos os 5 gráficos de pizza é exibida com 5 cores e porcentagens diferentes.

Conclusão

Este artigo demonstra o imenso uso de diagramas e gráficos em diferentes campos de computação e vida em geral, como industrial, econômico, on -line de internet banking, comércio eletrônico e muito mais. Discutimos os diferentes exemplos HTML para ilustrar o uso de diferentes e padrão propriedades de estilo CSS que são usadas para criar gráficos de pizza. Todos os exemplos mostram propriedades muito diferentes e gráficos de pizza bastante diferentes para as páginas HTML.