Gráfico de pizza CSS
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.