El gráfico circular es un tipo de gráfico que muestra datos en forma circular y generalmente se usa para mostrar datos porcentuales o proporcionales. El porcentaje representado en el gráfico por cada categoría se proporciona cerca de la porción correspondiente de una parte del gráfico circular. Estos gráficos son muy buenos para mostrar datos de dos o más categorías.
Código HTML: En el siguiente código, se muestra el diseño o estructura básica.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Pie Chart</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Pie Chart</h1> <div class="piechart"></div> </body> </html>
Código CSS: En la siguiente sección, se demuestra el diseño de un gráfico circular usando algunas propiedades CSS.
<style>
.piechart {
margin-top: 300px;
display: block;
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background-image: conic-gradient(
pink 70deg,
lightblue 0 235deg,
orange 0);
}
body,
.piechart {
display: flex;
justify-content: center;
align-items: center;
}
</style>
Código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Pie Chart</title>
<style>
.piechart {
margin-top: 300px;
display: block;
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background-image: conic-gradient(
pink 70deg,
lightblue 0 235deg,
orange 0);
}
body,
.piechart {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Pie Chart</h1>
<div class="piechart"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nehaahlawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA