sparkline

minigráfico

Genere minigráficos SVG con JavaScript sin ninguna dependencia externa.

Instalación

Esta biblioteca está disponible como un paquete NPM. Para instalarlo, use el siguiente comando:

 npm install @fnando/sparkline --save

Si estás usando Yarn (y deberías):

 yarn add @fnando/sparkline

Tendrá que llamar a sparkline.sparkline(svg, values, options) directamente si está cargando el script sin compilarlo (por ejemplo, paquete web). De lo contrario, puedes simplemente import sparkline from "@fnando/sparkline"; .

API

sparkline(svg, values, options = {})

• svg : Esta es una referencia <svg> que debe contener tres atributos requeridos ( width , height y stroke-width ). Estos atributos se utilizan para calcular el área de dibujo.
• values : puede proporcionar una matriz de números o una matriz de objetos que respondan a .value . Si tiene una estructura de datos diferente, consulte options.fetch .
• options : este argumento opcional le permite personalizar aún más el minigráfico. Las opciones disponibles son:
  • fetch : utilice esta función para devolver el valor si tiene una estructura de datos diferente que no es compatible de forma nativa con minigráfico.
  • onmousemove : al configurar esta función de devolución de llamada, habilitará el modo interactivo (a menos que configure options.interactive en false ). La firma de devolución de llamada es callback(event, datapoint) , donde datapoint es un objeto que contiene el valor, las coordenadas x/y y el índice del elemento.
  • onmouseout : esta función de devolución de llamada se llama cada vez que el mouse sale del área SVG. Puedes usarlo para ocultar cosas como información sobre herramientas.
  • spotRadius : establece el radio del punto. El valor predeterminado es 2 .
  • cursorWidth : establece el ancho del cursor. El valor predeterminado es 2 .
  • interactive : cuando es true , esto habilita el modo interactivo. No es necesario configurar esta opción si proporciona una devolución de llamada onmousemove .

Uso

Este es el ejemplo mínimo de trabajo:

 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
< svg class =" sparkline " width =" 100 " height =" 30 " stroke-width =" 3 " > </ svg >

< script >
  sparkline ( document . querySelector ( ".sparkline" ) , [ 1 , 5 , 2 , 4 , 8 , 3 , 7 ] ) ;
</ script >

Puede cambiar los colores configurando los atributos directamente en el elemento SVG o usando CSS, como se muestra a continuación:

 /* just the line */
. sparkline {
  stroke : red;
  fill : none;
}

/* line with highlight area */
. sparkline {
  stroke : red;
  fill : rgba ( 255 , 0 , 0 , .3 );
}

/* change the spot color */
. sparkline--spot {
  stroke : blue;
  fill : blue;
}

/* change the cursor color */
. sparkline--cursor {
  stroke : orange;
}

/* style fill area and line colors using specific class name */
. sparkline--fill {
  fill : rgba ( 255 , 0 , 0 , .3 );
}

. sparkline--line {
  stroke : red;
}

Ejemplos

Estático

Disponible en https://codepen.io/fnando/full/KyZLLV/

Interactivo

Disponible en https://codepen.io/fnando/full/GOQLVE/

Licencia

(La licencia MIT)

Por el presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el 'Software'), para operar con el Software sin restricciones, incluidos, entre otros, los derechos de uso, copia, modificación, fusión. , publicar, distribuir, sublicenciar y/o vender copias del Software, y permitir que las personas a quienes se les proporciona el Software lo hagan, sujeto a las siguientes condiciones:

El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.

EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO, PERO NO LIMITADO A, LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGÚN RECLAMO, DAÑO U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN CONTRACTUAL, AGRAVIO O DE OTRA MANERA, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTRAS NEGOCIOS EN EL SOFTWARE.