Chartist.js crea gráficos receptivos y animados con SVG

Los números y las estadísticas suelen ser completamente secos y, a veces, no son realmente claros, sino que oscurecen aún más. Al visualizar datos con gráficos, puede atraer mucha más atención. La biblioteca de JavaScript Chartist.js de Zurich convierte tantas secuencias numéricas como desee en gráficos de barras, de líneas, circulares u otros gráficos fáciles de entender. No solo se ven bien, sino que también responden y se pueden animar con animaciones.

Genere fácilmente gráficos simples

Chartist.js es un proyecto de Swiss Gion Kunz disponible bajo un DWTFPL. No voy a escribir qué significa esta abreviatura. Lo que puedo decir es que puedes usar Chartist.js para lo que quieras. A Gion Kunz no le importa 😉 No se necesita mucho para comenzar: primero implemente el JavaScript y el archivo de hoja de estilo de Chartist.js. El archivo JavaScript es necesario para la funcionalidad y la entrada de datos. El archivo de hoja de estilo contiene los diferentes tipos de gráficos. Use HTML para agregar un elemento contenedor al body que luego llenaremos con el gráfico. Adjuntar la clase ct-chart para el diseño básico y una clase que especifica la relación de aspecto del gráfico en el contenedor. Además de una razón cuadrática (ct-square) o el clásico 16:9 (ct-minor-seventh) y 3:4 (ct-perfect-fourth) proporciones, también puede elegir la sección dorada (ct-golden-section). Hay 17 relaciones de aspecto diferentes en total entre las que puede elegir.

<div class="ct-chart ct-perfect-fourth"></div>

En el ejemplo anterior, creamos un <div> elemento con una proporción de 3:4. Luego agregue las secuencias numéricas y las etiquetas de los gráficos al contenedor.

var data = {
  labels: ["Berlin", "Hamburg", "München"],
  series: [3460725, 1786448, 1353186]
};

new Chartist.Pie(".ct-chart", data);

El ejemplo ilustra la población de las tres ciudades alemanas más grandes con un gráfico circular. Asignamos los valores numéricos y las etiquetas como objeto literal a una variable (data). La etiqueta de cada valor numérico se define en el label formación; los números están definidos en el series formación.

Luego se crea un gráfico circular por Chartist.Pie(). Chartist.js espera dos parámetros: la clase del <div> contenedor para el gráfico y el objeto literal data con los valores del gráfico. El gráfico es un gráfico SVG con el ancho del elemento principal. La altura depende de la relación de aspecto especificada en el contenedor.

Gráficos con varias secuencias numéricas

Además de gráficos circulares, también puede crear gráficos de líneas y barras que pueden visualizar varias secuencias numéricas. Es importante que cada secuencia numérica, aunque sea solo una, se asigne como una matriz separada a la series formación. De lo contrario, no podrá mostrar el gráfico.

var data = {
  labels: [1990, 2000, 2010],
  series: [
    [3433695, 3382169, 3460725],
    [1652363, 1715392, 1786448],
    [1229026, 1210223, 1353186]
  ]
};

new Chartist.Bar(".ct-chart", data);

El ejemplo ilustra la población de las tres ciudades más grandes en 1990, 2000 y 2010 con un gráfico de barras. Chartist.js dibuja para cada año tres barras en el eje x: una barra para cada ciudad. Desafortunadamente, no es posible etiquetar cada barra individual, por lo que el gráfico en sí no dice claramente qué barra representa qué ciudad; sin embargo, las barras de cada fila se colorean automáticamente con diferentes colores.

Si desea convertir un gráfico de barras en un gráfico de líneas, simplemente cambie el Chartist.Bar() dentro Chartist.Line().

new Chartist.Line(".ct-chart", data);

Luego, el ejemplo visualiza los datos con un gráfico de líneas.

Opciones de gráfico

Dependiendo del gráfico que elija, tendrá diferentes opciones de configuración para ajustar su apariencia. Si prefiere un gráfico con dimensiones fijas, puede configurarlo. Asigne todas las opciones y los datos del gráfico como objeto literal a una variable.

var options = {
  width: "640px",
  height: "320px"
}

Luego asigne las opciones como un tercer parámetro al objeto Chartist.

new Chartist.Line(".ct-chart", data, options);

Las opciones de configuración dependen del tipo de gráfico. Puede, por ejemplo, definir los valores máximos del eje Y para gráficos de líneas y barras, de modo que el gráfico muestre un área determinada.

var options = {
  low: 1000000,
  high: 4000000
}

En el ejemplo anterior, el rango mostrado del eje y está limitado por low y high a valores entre 1 y 4 millones. Los gráficos circulares también se pueden mostrar en forma de dona.

var options = {
  donut: true,
  donutWidth: 50
}

Simplemente configure el parámetro donut para true. Para definir el ancho de la dona use donutWidth. También puede mostrar solo una parte de la dona en lugar de la entera. Las medias donas son comunes cuando se trata de la distribución de escaños en un parlamento, por ejemplo.

var options = {
  donut: true,
  donutWidth: 50,
  startAngle: 270,
  total: 13200718
}

Para tales gráficos, deberá elegir un ángulo de inicio (startAngle) para la dona y el tamaño (total) de los datos mostrados. Si el total el valor es idéntico a la suma de la secuencia numérica, los datos se mostrarán como una dona completa. Si el valor total es el doble del tamaño de la suma de la secuencia numérica, los datos se mostrarán como media dona.

Personaliza la apariencia

Chartist.js colorea automáticamente cada línea, barra y pieza circular. Sin embargo, puede cambiar el aspecto y elegir diferentes colores definiendo clases propias para cada segmento.

var data = {
  label: ["Berlin", "Hamburg", "München"],
  series: [
    {data: 3460725, className: "city1"},
    {data: 1786448, className: "city2"},
    {data: 1353186, className: "city3"}
  ]
};

En el ejemplo anterior, cada segmento obtuvo su propia clase asignando matrices con dos valores para cada número al series matriz – data por el numero y className para la clase.

Diseño de respuesta

Si no usa un ancho y una altura fijos, tiene una buena base para un diseño receptivo ya que el gráfico siempre se ajusta al ancho del elemento principal. Al mismo tiempo, el gráfico no se reducirá estáticamente. La intensidad de la línea y el tamaño de fuente de los gráficos de líneas siempre son los mismos. La cantidad de valores que se muestran en el eje Y se reduce con gráficos más pequeños para que las líneas no sean demasiado delgadas y las fuentes no sean demasiado pequeñas. Pero esto no siempre es suficiente. Especialmente las visualizaciones más pequeñas de gráficos complejos pueden conducir a situaciones en las que es difícil reconocer cualquier detalle. Por lo tanto, Chartist.js ofrece configuraciones específicas donde puede agregar consultas de medios para que se llamen según el tamaño de la ventana/pantalla del navegador o la orientación del dispositivo.

var options_responsive = [
  ["screen and (max-width: 640px)", {
    showLine: false,
    showArea: true
  }]
]

new Chartist.Line(".ct-chart", data, options, options_responsive);

En el ejemplo anterior, las líneas de un gráfico de líneas se enmascaran con una resolución de 640 píxeles y menos. En su lugar, verá la superficie de la curva. Puede configurar tantas consultas de medios con las opciones apropiadas como desee. Así es como puede ajustar el aspecto para diferentes resoluciones y orientaciones del dispositivo.

Gráficos animados

Los gráficos se pueden animar fácilmente usando el animate() método. Puede, por ejemplo, animar barras desde cero hasta arriba. Para hacerlo, llame a una función a través de un draw evento tan pronto como el gráfico esté listo.

new Chartist.Bar(".ct-chart", data).on("draw", function(bars) {
  bars.element.animate({
    y2: {
      begin: 0,
      dur: 500,
      from: bars.y1,
      to: bars.y2
    }
  })
});

En el ejemplo anterior, asignamos cada barra de gráfico a una función usando bars. Estos están definidos por el elemento SVG <line>. Queremos animar la altura de las barras que se define en la propiedad y2 de El <line> elemento. La opción begin le permite definir un retraso de tiempo cuando la animación debe comenzar. El parámetro dur define la duración de la animación en milisegundos. Las opciones from y to definir los valores para el inicio y el final de la navegación. Al principio <line> debe tener una altura de cero. Esto se logra cuando las propiedades y1 y y2 tienen valores idénticos. Como todos los elementos y atributos SVG de un gráfico se pueden manipular, puede crear animaciones únicas. Solo eche un vistazo al código fuente SVG del gráfico.

Compatibilidad con navegadores y enlaces relacionados

Todos los navegadores principales son compatibles con Chartist.js (incluido Internet Explorer 9 y superior, sin embargo, con algunas restricciones). Para comprobar la compatibilidad de su navegador, consulte la tabla de soporte. La biblioteca proporciona algunas opciones de configuración buenas y útiles y funciona especialmente bien con navegadores modernos en dispositivos móviles. Sin embargo, hay algunas cosas que podrían mejorarse, lo que, por supuesto, puede suceder en el futuro. Teniendo todo en cuenta, puede decir que Chartist.js es una solución bastante buena para visualizar datos con gráficos modernos y atractivos. El hecho de que sea gratuito y se pueda utilizar para cualquier fin legal es un plus a tener en cuenta.

(dpe)