Biblioteca de gráficos SVG interactiva versátil-apexcharts. js

Vista prévia

Descripción

apexcharts. js es una biblioteca de gráficos JavaScript rica en características que le permite crear dinámico, interactivo, sensible, animado, basado en SVG línea, área, columna/barra, mixto, burbuja, dispersión, PIE, RADIALBAR, HEATMAP, gráficos de GAUGE y gráficos para visualizar los datos complejos.

¿Cómo funciona?

Instálelo con NPM.

# NPM
$ npm install apexcharts --save

import ApexCharts from 'apexcharts'

O incluya la versión compilada y minimizada de la biblioteca ' apexcharts. js ' en la página.

<script src="/path/to/apexcharts.min.js"></script>

Cree un elemento de marcador de posición para el gráfico.

<div id="myChart"></div>

Defina sus propias opciones de & de datos.

var options = {


chart: {




height: 380,




type: 'line',




zoom: {






enabled: false




}


},


dataLabels: {




enabled: false


},


stroke: {




curve: 'straight'


},


series: [{




name: "Desktops",




data: [30, 41, 35, 51, 49, 62, 69, 91, 126]


}],


title: {




text: 'Product Trends by Month',




align: 'left'


},


grid: {




row: {






colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns






opacity: 0.5




},


},


labels: series.monthDataSeries1.dates,


xaxis: {




categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],


},
}

Cree un nuevo gráfico de ApexCharts.

var myChart = new ApexCharts(


document.querySelector("#myChart"),


options
);

Represente un gráfico de líneas básico en el elemento de marcador de posición.

chart.render();

Echa un vistazo a la offical documentación para más usos.

Registro de cambios

v3.4.1 (02/18/2019)

• Actualice & corrección

v3.2.2 (02/06/2019)

• Actualice & corrección

08/11/2018

• Bug solucionado para dateFormat estrellando Firefox

08/10/2018

• formateador de información sobre herramientas fijo para valores flotantes. topes de degradado corregidos

08/07/2018

• v1.2.0: fixed bug when changing color

08/07/2018

• v1.1.5: zoomout fixes

08/05/2018

• v1.1.3: small values handling – yaxis formatters fixed; case sensitivity for filename – turned on; pie label formatter fixed