Biblioteca de gráficos basados en SVG moderna-gráfico frappé

Vista prévia

Descripción

Frapp à © Charts es una librería JavaScript pura para renderizar gráficos modernos, responsivos y animados con varios tipos usando el elemento SVG.

Chart type supported:

• Gráfico de barras
• Gráfico del eje
• Gráfico base
• Gráfico de líneas
• Gráfico de dispersión
• Gráfico de porcentaje
• Mapa de calor inspirado en github
• Más …

¿Cómo funciona?

Instale los gráficos de Frapp à © con NPM:

# NPM
$ npm install frappe-charts--save

Inserte el script Frappe-Charts. min. js en el documento.

<script src="frappe-charts.min.js"></script>

Cree un contenedor en el que desee colocar los gráficos.

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

Defina los datos que se trazarán en el gráfico.

let myData = {

labels: ["2007", "2008", "2009", "2010", "2011", "2012",


"2013", "2014", "2015", "2016", "2017"],


datasets: [{


"title": "Events",


"color": "orange",


"values": report_count_list,


// "formatted": report_count_list.map(d => d + " reports")

}]
};

Dibuje un gráfico de barras básico dentro del contenedor que ha creado.

let myChart = new Chart({


parent: "#myChart",


title: "My Chart",


data: myData
});

Cambie el tipo de gráfico que prefiera.

let myChart = new Chart({


parent: "#myChart",


title: "My Chart",


data: myData,


type: 'bar', // or 'axis-mixed', 'line', 'scatter', 'pie', 'percentage'
});

Registro de cambios

10/11/2018

• v1.1.0