Hermosa SVG embudo gráfico JavaScript biblioteca-FunnelGraph. js

Vista prévia

Descripción

La biblioteca de JavaScript FunnelGraph. js le ayuda a dibujar dinámicamente un gráfico de embudo horizontal/vertical hermoso, personalizable y basado en SVG para representar etapas en un proceso.

Funcionamiento

Instale & descargar.

# NPM
$ npm install funnel-graph-js --save

Cargue la hoja de estilos principal y el tema CSS en el documento.

<link rel="stylesheet" href="/dist/css/main.min.css">
<link rel="stylesheet" href="/dist/css/theme.min.css">

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

<div class="funnel">
</div>

Cargue el código JavaScript en la parte inferior del documento.

<script src="/dist/js/funnel-graph.js"></script>

Defina etiquetas, valores y colores en un objeto de datos.

const myData = {

labels: ['Impressions', 'Add To Cart', 'Buy'],

colors: ['#FFB178', '#FF3C8E'],

values: [12000, 5700, 360]
}

También se admite el gráfico de embudo bidimensional.

const myData = {

labels: ['Impressions', 'Add To Cart', 'Buy'],

subLabels: ['Direct', 'Social Media', 'Ads'],

colors: [


['#FFB178', '#FF78B1', '#FF3C8E'],


['#A0BBFF', '#EC77FF'],


['#A0F9FF', '#7795FF']

],

values: [


[3500, 2500, 6500],


[3300, 1400, 1000],


[600, 200, 130]

]
};

Inicialice el gráfico del embudo.

var graph = new FunnelGraph({


container: '.funnel',


data: myData
});

Dibuje el gráfico de embudo en el elemento de marcador de posición.

graph.draw();

Configuración del gráfico de embudo con las siguientes opciones.

var graph = new FunnelGraph({


container: '.funnel',


data: myData,


direction: 'horizontal', // or 'vertical'


gradientDirection: 'horizontal', // or 'vertical'


displayPercent: true,


width: 800,


height: 800,


subLabelValue: 'percent'
});

API methods.

// changes to vertical view
graph.makeVertical();

// changes to horizontal view
graph.makeHorizontal();

// toggles the direction
graph.toggleDirection();

// changes to vertical graditent
graph.gradientMakeVertical();

// changes to horizontal gradient
graph.gradientMakeHorizontal();

// toggles the gradient direction
graph.gradientToggleDirection();

// updates the height/width
graph.updateHeight();
graph.updateWidth();

// updates data
graph.updateData({data});

// updates options
graph.update({options});

Registro de cambios

v1.3.7 (04/12/2019)

• Agregar opción para mostrar el valor en bruto de la subetiqueta

v1.3.6 (03/07/2019)

• Método Add para crear una línea central para formas
• Solucionado el problema del tema

v1.3.4 (02/28/2019)

• Actualizar tema