Gráfico de pastel CSS
Ejemplo 01:
Comencemos con el ejemplo más básico del estilo HTML para crear un gráfico circular en nuestra página web HTML. Este ejemplo comienza con las etiquetas HTML básicas: HTML, cabeza, estilo y cuerpo. Antes de diseñar la página HTML, debemos echar un vistazo a todos sus elementos a través de la etiqueta del cuerpo. El cuerpo de nuestra página HTML contiene un solo rumbo del tamaño más grande, yo.mi. H1. El encabezado sigue el elemento "div" para crear una nueva sección dentro de nuestra página. El elemento div se especifica con una clase de "piechartcontainer" y está cerrado después de eso. El cuerpo de esta página HTML se completa aquí.
Ahora, tenemos una cabeza que sigue la etiqueta de "título" para dar un nombre a nuestra página web. Dentro de la etiqueta de estilo CSS de este código, usamos el elemento "cuerpo" para diseñar todos sus elementos combinados primero. Todos los cuerpos contienen el fondo de color gris de fondo. Ahora, usamos la clase "PiechartContainer" con el punto (.) personaje para crear un gráfico de pastel. El elemento Div que contiene esta clase tiene un margen superior de 30 píxeles, pantalla de bloque, posición absoluta, ancho y altura de 500 píxeles y un borde de un radio del 50 por ciento.
Junto con eso, utilizamos la propiedad de imagen de fondo para crear un gráfico circular con su atributo de "gradiente cónica". Necesitamos dar los diferentes valores y colores para tres secciones cónicas del gráfico circular para las instrucciones X, Y y Z. El valor total de 3 secciones cónicas con tres ejes - x, y y z - define el área para cada sección de manera diferente. Cerremos la etiqueta de estilo, guardemos el código y ejecutemos este código dentro del código de Visual Studio.
La salida de este código HTML muestra un solo encabezado y un gráfico circular que se muestra en la pantalla de la página web HTML. El gráfico circular muestra 3 secciones cónicas dentro de él con diferentes colores y porcentajes.
Ejemplo 02:
Comencemos con otro ejemplo de HTML para crear un gráfico de pastel de un nuevo estilo. El mismo formato HTML se utiliza en este archivo. Echamos un vistazo al área del cuerpo junto con su estilo para cada elemento de la etiqueta de estilo de nuestro código. El color general de fondo del cuerpo se establece en gris a través de la propiedad de "fondo" utilizada para el ".elemento del cuerpo ". El cuerpo de esta página HTML contiene un solo encabezado de tamaño 1 seguido de la creación de un nuevo contenedor "Div" especificado por la identificación de "contenedor de mits-pat-chart". El encabezado no tiene un estilo mientras la pantalla de este contenedor se flexiona y los elementos están alineados con el centro.
Dentro de este contenedor principal, creamos otros dos contenedores utilizando el elemento "Div". El primer "div" se clasifica por la identificación de "my-piie-chart" y el segundo "div" se clasifica por la identificación del "contenedor". El primer contenedor "Div" con el "My-Pie Chart" se usa para crear un gráfico de pastel en forma de círculo. Para esto, use su clase "My-Pie Chart" con la propiedad "Antecedentes" en una etiqueta de estilo. El atributo de "gradiente cónico" se pasa a la propiedad de fondo con diferentes colores y su relación de aspecto dentro del porcentaje para mostrar cada color en la tabla de circulares con porcentaje y área seleccionadas. La propiedad de radio fronterizo para este gráfico circular se establece en 50% con el ancho y la altura de 200px.
Nuestro gráfico circular se crea en forma de círculo. El segundo DIV con la identificación de "contenedor" utiliza 8 contenedores más dentro de él. El contenedor "div" con la identificación de "contenedor" contiene un margen izquierdo de 30 px, fondo de rosa de té y acolchado de 5 px. Los 8 contenedores dentro de esta sección "Div" están clasificados por la clase de "entrada" que está diseñada con la pantalla flexible y los elementos de alineación central. Cada elemento "div" de estos 8 contenedores contiene 2 contenedores más dentro de él. El primer contenedor dentro de cada uno se clasifica con la clase de "color de entrada" y el estilo en línea agregando el color de fondo para cada. La clase de "color de entrada" para este primer "div" se usa para establecer el ancho y la altura para las 8 secciones, i.mi. 15px de ancho y altura para cada uno.
El segundo contenedor div se clasifica con el "título de entrada" junto con el título de un gráfico circular para cada área seccional. Los márgenes superior e izquierdo para esta sección se establecen en 5px y 3px, respectivamente. Todos los 4 elementos principales "Div" están cerrados aquí. Guardemos y ejecutemos este código para ver el resultado del gráfico circular.
La salida muestra 1 encabezado y 1 gráfico circular con un contenedor en el lado izquierdo que muestra los títulos que pertenecen a cada color del gráfico de pastel.
Ejemplo 03:
Comienza con el encabezado 1 del tamaño más grande en HTML. Entonces, tenemos 5 elementos "div" utilizados para la creación de 5 gráficos de pasteles. Usamos la misma clase de nombre para los 5 elementos div, yo.mi. class = "pastel". Utilizamos el estilo dentro de cada sección DIV para establecer el valor porcentual para cada gráfico circular con el uso del personaje "-P" establecido en 20, 40, 95, 80 y 75. Junto con eso, la propiedad "-col" se usa para establecer el color para cada gráfico de pastel, excepto el primero, yo.mi. azul oscuro, morado, verde y amarillo. Los ejes X, Y y Z están configurados para los 4 gráficos circulares que no sean los primeros.
Echemos un vistazo a la etiqueta de estilo de esta página HTML. Usamos la clase "pastel" para diseñar el primer elemento div con un porcentaje de 20 con el color rojo oscuro. También se utilizan espesor de borde "-b", ancho, relación de aspecto, estilo de pantalla, márgenes y diferentes propiedades relacionadas con la fuente para crear una forma de gráfico de pastel estándar. Las compensaciones antes y posteriores se usan para agregar contenido y especificar la posición y el radio de borde para el elemento antes y después del elemento de clase "Pie". Algunas otras propiedades de transición, transformación y traducción se utilizan para diseñar los gráficos circulares.
La salida para los 5 gráficos circulares se muestra con 5 colores y porcentajes diferentes.
Conclusión
Este artículo demuestra el inmenso uso de diagramas y gráficos en diferentes campos de la informática y la vida en general, como la banca de Internet industrial, económica, en línea, el comercio electrónico y muchos más. Discutimos los diferentes ejemplos de HTML para ilustrar el uso de propiedades de estilo CSS diferentes y estándar que se utilizan para crear gráficos circulares. Todos los ejemplos muestran propiedades muy diferentes y, sin embargo, sean gráficos circulares bastante diferentes para las páginas HTML.