Implementando gráficos estadísticos con Highcharts

Post by: sistekeladmin
2022-07-08 01:09:11
0 Comentarios

Implementando gráficos estadísticos con Highcharts

Con ayuda de Highcharts podemos implementar una gran variedad de gráficos estadísticos de forma rápida.

Para poder implementar highcharts podemos descargar la librería, o usar la url y referenciarlo en un script.

https://www.highcharts.com/blog/download/

En nuestro caso usaremos la url que nos presentan para poder usarlo.

Creamos nuestra página y en el body agregamos un div con un identificador en este caso se llamará "container".

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

</head>
<body>
	
	<h3>Implementando highcharts</h3>
	<div id="container">
	</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
</body>
</html>

El script lo agregamos antes del body y también una sección script para configurar el chart, para este ejemplo haremos un piechart.

En la sección de series es donde se configura los datos del piechart, como es las etiquetas para cada sección y el valor correspondiente. Al final el código queda de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

</head>
<body>
	
	<h3>Implementando highcharts</h3>
	<div id="container">
	</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
var charts=Highcharts.chart('container', {
			chart: {
				plotBackgroundColor: null,
			    plotBorderWidth: null,
			    plotShadow: false,
					type: 'pie'
			},
			title: {
					text: 'Uso de Redes Sociales'
			},
			
			tooltip: {
					pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				  },
				  accessibility: {
				    point: {
				      valueSuffix: '%'
				    }
			},
			legend: {
					reversed: true
			},
			plotOptions: {
				pie: {
			      allowPointSelect: true,
			      cursor: 'pointer',
			      dataLabels: {
			        enabled: true,
			        format: '<b>{point.name}</b>: {point.percentage:.1f} % - ({point.y})'
			      }
			    }
			},
		
			series: [{
					
					name: 'Reporte',
					data: [{
						name:'Facebook',
						y:40
						},
						{
						name:'Whatsapp',
						y:50
						},
						{
						name:'Instagram',
						y:40
						},
						
					]
			}, ],
		
			credits:{
				enabled:false
			}
	});
</script>
</body>
</html>

Preparando todo el código en el navegador quedaría de esta forma: