Biblioteca de gráficos de material de diseño simple-mimaCharts

Vista prévia

Descripción

mimaCharts es una librería JavaScript simple, ligera y fácil de usar para renderizar gráficos/gráficas sensibles, bonitos, interactivos y variados siguiendo las pautas de diseño de materiales de Google. Actualmente admite línea, barra, tarta, donut, gráficos de marcación.

Funcionamiento

Sólo tiene que descargar y colocar la biblioteca mimaCharts. js justo antes de la etiqueta del cuerpo de cierre y estamos listos para ir.

<script src="mimaCharts.js"></script>

Prepare una matriz de datos que desee presentar.

var data = [];

Especifique el tipo de gráfico que desea utilizar.

config: {


// line, bar, pie, donut, dial

type: 'line',


// for line and bar charts

dataLevel: 2


},

Represente un gráfico de líneas en la página.

mimaChart(config, data);

Más opciones de configuración.

config: {


// line, bar, pie, donut, dial

type: 'line',


// for line and bar charts

dataLevel: 2,


// force an aspect ratio for the chart. defaults to 2:1

ratio: '',


 // set a maximum height for the chart. defaults to none, obeys aspect ratio

maxHeight: 'none',


 // display values as regular numbers (blank), % or $

format: '',


 // scale options

scale: {


lowest: 0, // set the lowest value on the scale, default is zero, set to "auto" to be automatic


highest: 100, // set the highest value on the scale, leave undefined for automatic


steps: 10, // number of steps in the scale


roundTo: 100, // round the scale to


defaultLabel: '', // if no label or a blank label is provided use this default label instead


sort: true, // sort by highest value set to "false" to use your own provided sorted order,


types: ['bar', 'pie', 'donut', 'line'], // allowed chart types for the viewer to switch between. default is all


parentLabels: true, // when hovering a point automatically add the parent names to the label


parentLabelsSeparator: ', ', // sets the string that is used between labels for creating parent labels

},


// custom sort function to use or a string to use a function in window

sort: function(a, b){},


// an array of lines to overlay over a bar or line chart that plot with the vertical scale

scaleLines: [


 {



l: 'line title',



h: '1px', //line height



v: 100, //value to plot at


}

]


}

Funciones de devolución de llamada.

config: {


onclick: function(event, dataPoint, chart) {},

 onchange: function(changeType, config, chart) {}


}

Registro de cambios

03/29/2019

• línea de gráfico de líneas/tamaño de punto reducido

03/20/2019

• clase de líneas de escala agregadas a líneas de escala personalizadas para su personalización con CSS

03/15/2019

• configurar la altura de línea de escala

12/18/2018

• utilizar el formato para números en la leyenda, barras y líneas

08/18/2018

• Actualización de JS