Como hacer graficas con javascript (ApexCharts)
Código Javascript
- Por Programador ASP clásico /
- 27/01/2022 @ 12:45:12 /
- 1234 visitas
Librería javascript para crear gráficos (ApexCharts)
Las gráficas son una herramienta importante para visualizar datos de manera clara y concisa. En la actualidad, existen diversas librerías en JavaScript que permiten crear gráficas de manera rápida y sencilla. Una de estas librerías es ApexCharts, que permite crear gráficas interactivas y personalizables.
El código proporcionado es un ejemplo de cómo utilizar ApexCharts para crear un gráfico lineal. En el código, se definen los datos de las series y las opciones de visualización del gráfico. Luego, se crea el objeto de gráfico con la función ApexCharts y se renderiza en el documento HTML con la función render(). El resultado es un gráfico lineal con tres series de datos y opciones de visualización personalizadas como título, ejes, leyendas y herramientas de interacción. Este ejemplo utiliza también Bootstrap 4 para la estructura y estilo del HTML.
Ejemplo de gráficos creados con ApexCharts
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Gráfico Lineal con Bootstrap y Highcharts</title>
<!-- CSS de Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Biblioteca de ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="chart"></div>
</div>
</div>
</div>
<script>
// Datos de las series
var series = [{
name: "Series 1",
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
},
{
name: "Series 2",
data: [20, 35, 45, 55, 70, 75, 90, 100, 110]
},
{
name: "Series 3",
data: [10, 20, 30, 40, 50, 60, 70, 80, 90]
}];
// Opciones de visualización
var options = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: series,
title: {
text: 'Ejemplo de Gráfico Lineal con Bootstrap 4 y ApexCharts',
align: 'center'
},
xaxis: {
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep'],
},
yaxis: {
title: {
text: 'Valores'
},
},
tooltip: {
enabled: true,
y: {
formatter: function(val) {
return val
}
}
}
}
// Crear el gráfico
var chart = new ApexCharts(document.querySelector("#chart"), options);
// Renderizar el gráfico
chart.render();;
</script>
</body>
</html>
tags: apexcharts, graficas javascript. libreria graficas apexcharts, apexcharts.js
En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por ASP TEAM. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.