jqPlot: mostrar la leyenda en varias columnas

El otro día trabajaba con la librería jqPlot, una librería para crear gráficas por medio de javascript y jQuery, y me encontraba con que la leyenda de un gráfico de tarta que estaba haciendo se salía de su elemento contenedor, dado que tenía muchas líneas (en concreto, 58). Me pregunté ¿Cómo hago para que se muestre en dos columnas?. Pensé que era obvio que a alguien le habría pasado ants y encontré la solución en stack-overflow:

//La localización no es importante, sólo el 
//rendererOptions
legend: { 
  show: true, 
  location: 'ne',
  rendererOptions: {numberColumns: 2}
}

Luego decidí bucear un poco más en la documentación y me encontré con un plugin que nos dará mayor versatilidad para trabajar con la leyenda: jqplot.enhancedLegendRenderer.js

La cuestión es invocarlo dentro de la configuración de la leyenda y, además de permitirnos definir el número de filas y columnas (cosa que ya podemos hacer con el renderer normal, pero en este han pulido algunos bugs) también nos permite ocultar/mostrar una serie al pinchar en la leyenda. Se me ocurrió usarlo para mostrar los resultados debajo de la gráfica, en 6 columnas de 10 filas, para que quedara más bonito. Total, que la cosa fue así:

//La localización no es importante, sólo el 
//rendererOptions
legend: {
  renderer: $.jqplot.EnhancedLegendRenderer, 
  show: true, 
  location: 's',
  rendererOptions: {numberColumns: 10, numberRows: 6}
}
Anuncio publicitario

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.